uniapp 目前仅支持在主包或分包页面引用分包内组件, 只需要在 vue 文件 import 并配置 components, 同时在 pages.json 文件中配置相应的 componentHolder, 详见 跨分包自定义组件引用
也就是说, uniapp 只支持页面级别的分包组件使用, 不支持组件级别的分包组件使用, 当然主包 components 组件可被任意 vue 文件使用
现在有这样的场景: 有一个 example-component.vue 组件, 位于某分包 subA 内, 现在在主包或非分包 subA 的分包 (如 subB) 组件内需要使用 example-component 组件
解决方案:
- 使用
hbuilder运行到微信小程序, 在项目路径unpackage/dist/dev/mp-weixin/下对相应的主包或分包组件添加componentHolder属性, 其形式如下:{ "component": true, "usingComponents": { "multi-column-picker": "/otherPages/components/multi-column-picker" }, "componentPlaceholder": { "multi-column-picker": "view" } } - 社区已有插件
@uni_toolkit/webpack-plugin-component-config, 可解决此问题, 但其要求的node版本较高, 且会对源文件进行侵入, 不过胜在思路和代码, 可供参考 - 自行实现相应的插件去处理
componentHolder, 如vue2项目在根目录下配置vue.config.js文件,vue3项目在根目录下配置vite.config.ts文件, 注意如果无此文件, 可手动创建文件并参考相关文档配置webpack或vite插件。本人已实现该插件, 在项目根目录添加配置文件component-placeholder-config.json文件以配置componentPlaceholder, 如有人需要, 可私信或添加微信why511686付费获取, 插件基本功能完善, 易于使用和二次开发, 代码严谨、各种边界情况均有考虑 - 不知道高版本 hbuilder/uniapp 是否已支持组件级的跨分包组件引用?
p***@gmail.com (作者)
大佬 上面提到的插件也是你们写的 但是 node 版本要求太高了 能不能考虑出一个 build.min.js 文件 这样可以直接复制这个压缩后的js文件被 webpack 或 vite 使用? 我们这小程序 node 是 12.几的 升级不动 所以后续参考思路自己 本地写了个js插件...
2025-11-07 17:13
p***@gmail.com (作者)
补充下 我这样的 component-placeholder-config.json 文件大概长这样:
{
"components/screen/screen": {
"componentPlaceholder": {
"multi-column-picker": "view"
}
},
"crmPages/components/cap-mulchoose/cap-mulchoose": {
"componentPlaceholder": {
"multi-column-picker": "view"
}
}
}
其实这种方式更友好一些 可以从全局角度去看 在开发时就需要注意到这种问题 有意识的做相应配置 而vue文件里就正常引用分包组件即可 而且不侵入 vue 源文件, 如果需要styleIsolations 等配置 也可以在这里添加 只是插件再做相应支持即可
2025-11-07 17:16
DCloud_UNI_JBB
回复 p***@gmail.com: 那个插件就是我写的
2025-11-07 17:28
DCloud_UNI_JBB
回复 p***@gmail.com: 你的思路我明白，各有各的好吧，满足自己的需求就行
2025-11-07 17:29