在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案

在开发扫码小程序中,遇到胡坑"​​require() 默认不支持绝对路径"及其解决方案。

在微信小程序中,​require()默认不支持绝对路径​ ​(如/utils/store.js@/utils/store.js),只能使用相对路径(如../../utils/store.js)。

使用 resolveAlias 配置项用来自定义模块路径的映射规则。

配置了之后,会对 require 里的模块路径进行规则匹配并映射成配置的路径。

如果命中多条映射规则,则取最长的命中规则。

perl 复制代码
{
  "resolveAlias": {
    "~/*": "/*",
    "~/origin/*": "origin/*",
    "@utils/*": "utils/*",
    "subBUtils/*": "subpackageB/utils/*"
  }
}

注意

1、resolveAlias 进行的是路径匹配,其中的 key 和 value 须以 /* 结尾。

配置了上述路径映射规则,会做如下匹配并转换

  • ~/mod.js -> mod.js
  • ~/origin/mod.js -> origin/mod.js
  • @utils/mod.js -> utils/mod.js
  • subBUtils/mod.js -> subpackageB/utils/mod.js

2、如果在 project.config.json 中指定了 miniprogramRoot,则 /* 指代的根目录是 miniprogramRoot 对应的路径,而不是开发者工具项目的根目录。

然后使用别名引用:

ini 复制代码
const store = require('@utils/store.js'); // 等效于绝对路径

注意​ ​:此功能需要基础库版本 ​​2.12.0+​ ​,且仅支持require,不支持import

相关推荐
toooooop82 分钟前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_8 分钟前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy10 分钟前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全16 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101219 分钟前
[前端]1.html基础
前端·笔记·学习·html
白水清风27 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
小菜全38 分钟前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
小天呐1 小时前
qiankun 微前端接入实战
前端·js·微前端
周航宇JoeZhou1 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台
Yaavi1 小时前
一个基于markdown的高性能博客模板
前端·开源·源码