uni-app分包配置写在pages.json中subNVue同级的subPackages数组里,每项含root(相对src的子包根目录,不能以/或..开头)和pages(子包内页面路径数组)。

uni-app 分包配置写在哪?pages.json 里不是随便放的
分包必须在 pages.json 的 subNVue 同级位置显式声明 subPackages 或 subPackages(H5 不生效,仅小程序平台),不是写在 pages 数组里,也不是丢进 h5 字段下。很多人配完没效果,第一反应是“是不是不支持”,其实是路径或结构错了。
-
subPackages是数组,每一项必须含root(子包根目录,相对src)和pages(该包内页面路径数组) -
root值不能以/开头,也不能包含..,比如"root": "subPackages/user"✅,"root": "/subPackages/user"❌ - 主包的
pages里不能出现子包内的路径,否则编译报错:SubPackage page not found - 子包内不能再嵌套子包(uni-app 目前不支持多层分包)
为什么跳转后白屏或 404?检查 uni.navigateTo 的路径写法
分包页面跳转必须用完整路径(带子包前缀),不能只写文件名。uni-app 不会自动补全子包上下文,路径错误直接导致白屏,控制台可能无报错,但 network 面板能看到 404 请求。
- 正确写法:
uni.navigateTo({ url: '/subPackages/user/pages/profile/profile' })—— 注意开头的/和完整层级 - 错误写法:
uni.navigateTo({ url: 'profile' })或uni.navigateTo({ url: 'pages/profile/profile' }) - 如果用
uni.switchTab跳 tab 页面,目标页必须在tabBar配置中,且路径必须是主包内页面;子包页面不能作为 tabBar 页面 - 动态拼接路径时,确保字符串不含多余空格或换行,
url.trim()很有必要
分包体积还是超了?注意 static 和 common 的归属
uni-app 默认把 static 和 common 放在主包,即使你在子包目录下新建了 static 文件夹,资源仍会被打到主包——这会让主包体积悄悄膨胀,失去分包意义。
- 子包专用图片、字体等资源,必须放在对应子包目录内(如
subPackages/user/static/icon.png),并在子包页面中用相对路径引用 -
common目录下的 JS/TS 工具函数,如果只被某个子包使用,建议挪进该子包,避免主包冗余加载 - 使用
import('@/subPackages/user/utils/request.js')是安全的;但import('@/common/request.js')会强制打入主包 - 可以用微信开发者工具的“代码依赖分析”功能,看某页面实际加载了哪些模块,验证是否真被分开了
条件编译 + 分包:不同平台要小心 mp-weixin 和 mp-alipay 的差异
支付宝小程序要求子包 root 必须是小写字母+下划线,而微信允许中划线;同时支付宝不支持子包内使用 subNVue,这些细节不处理,会导致某一平台分包失效或报错。
- 跨平台项目,子包
root名建议统一用小写字母+下划线,例如"root": "sub_packages/user" - 涉及原生组件或
cover-view的页面,若放在子包中,在支付宝端需确认是否被降级或隐藏 - 条件编译写在
pages.json里要用// #ifdef MP-WEIXIN包裹整个子包配置块,不能只包某个字段 - 运行时判断平台(如
uni.getSystemInfoSync().platform === 'ios')不影响分包逻辑,但编译时的平台标识会影响打包结果
分包不是加个配置就完事,真正卡住人的往往是路径拼写、资源归属和平台特性这三个点。尤其当项目已有几十个页面,重构分包时很容易漏掉某个 import 或静态引用,建议改完立刻用真机测跳转 + 查 network 请求路径。

















