uni-app如何配置pages.json中的easycom自动引入-uni-app-PHP中文网

easycom配置必须位于pages.json根对象顶层，与pages、globalstyle同级；autoscan设为true才扫描components目录，custom规则需用合法正则和路径模板，组件须存于标准components目录且命名规范，修改后需重启编译生效。

uni-app如何配置pages.json中的easycom自动引入

easycom 配置必须写在 pages.json 的顶层，不能嵌套

很多人把 easycom 写在 globalStyle 或 tabBar 里，结果完全不生效。它和 pages、subNVue 是同级字段，必须直接放在 pages.json 根对象下。

常见错误写法：

{
  "globalStyle": { ... },
  "easycom": { ... }  // ❌ 错！被当成 globalStyle 的子属性
}

正确结构示例：

{
  "pages": [...],
  "subNVue": [...],
  "easycom": {  // ✅ 对！和 pages 并列
    "autoscan": true,
    "custom": {
      "^uni-": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },
  "globalStyle": { ... }
}

autoscan 设为 true 才会扫描 components/ 目录下的组件（默认就是 true，但显式写出更稳妥）
custom 是可选的，但只要写就要是合法 JSON 对象，空对象 {} 也比留空或写成 null 安全
H5 端需额外确认：若使用 vue.config.js，里面不能覆盖或禁用 compilerOptions.easycom，否则 pages.json 的配置会被忽略

正则匹配规则写错会导致组件找不到

匹配规则的 key 是正则字符串，value 是路径模板，$1 表示第一个捕获组内容。写错括号、漏转义、路径斜杠方向不对，都会让 <u-button></u-button> 这类标签无法解析。

典型问题：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

想匹配 components/form/Select.vue，却写成 "^form-(.*)": "components/form/$1.vue" → 实际会去找 components/form/Select.vue，但组件名是 form-select，$1 捕获的是 select，没问题；但如果组件叫 form-date-picker，$1 就是 date-picker，路径就得是 components/form/$1.vue，而实际文件可能是 components/form/date-picker.vue —— 这时就得改规则为 "^form-(.*)": "components/form/$1/$1.vue" 或拆成多条规则
路径中用了相对路径如 ../components/xxx.vue → uni-app 不支持向上跨目录，只认项目根目录起始的路径（@/ 或 components/）
value 中写了 .jsx 或 .ts 后缀 → easycom 只识别 .vue 和 .tsx（且需对应编译支持），其他后缀无效

components 目录位置和命名不合规，easycom 直接跳过

easycom 不会扫描任意位置的组件目录，只认项目根目录下的 components/（与 pages/ 同级），且有硬性限制：

目录名必须是 components，不能是 comp、my-components 或带前缀如 __components
子目录不能以 __ 或 . 开头（例如 components/__base/ 或 components/.utils/ 会被跳过）
组件文件名必须是 PascalCase（如 MyButton.vue），且组件内部 export default { name: 'MyButton' } 必须一致；否则 H5 端 fallback 注册可能失败
文件扩展名只能是 .vue 或 .tsx；.js 或 .json 文件不会被识别为组件