uni-app pages.json文件中如何使用easycom中的custom配置
时间: 2024-02-03 16:15:52 浏览: 317
在 `pages.json` 文件中,可以使用 `easycom` 字段来配置自定义组件的引入方式。其中,`easycom` 字段是一个数组,每一项表示一个自定义组件的引入规则。
例如,我们有一个自定义组件叫做 `my-component`,它位于 `components/custom/my-component` 目录下,我们可以在 `pages.json` 文件中这样配置:
```json
{
"easycom": {
"custom": {
"^my-component$": "components/custom/my-component/my-component.vue"
}
}
}
```
这里的配置表示,当我们在页面中使用到 `my-component` 组件时,自动引入 `components/custom/my-component/my-component.vue` 文件。
在 `custom` 对象中,`^my-component$` 是一个正则表达式,表示匹配组件名为 `my-component`。而后面的字符串则是组件的实际路径。
除了使用正则表达式,还可以使用通配符 `*` 来匹配多个组件。例如:
```json
{
"easycom": {
"custom": {
"^my-.*$": "components/custom/my-components/$0.vue"
}
}
}
```
这里的配置表示,当我们在页面中使用到 `my-` 开头的组件时,自动引入 `components/custom/my-components/` 目录下同名的 `.vue` 文件。
需要注意的是,在使用 `easycom` 中的 `custom` 配置时,需要开启 `uni-app` 的 `easycom` 功能。具体的开启方式可以参考 `uni-app` 官方文档。
阅读全文