uni-app分包中子包static资源不被自动打包,需统一放根目录static下或配置CopyWebpackPlugin;CDN资源需域名备案、HTTPS、无参数URL;分包超限需手动查产物大小;依赖未正确分离会导致模块找不到。

为什么分包后子包里的图片/字体找不到
不是路径写错了,而是 uni-app 默认不把子包目录下的 static 文件夹打进对应分包——它只认项目根目录的 static/,其他地方的静态资源会被忽略。你把图片放进 subpackageA/static/,构建后根本不会出现在 unpackage/dist/build/mp-weixin/subpackageA/ 里。
常见现象:开发工具预览正常,真机调试白屏或报 404;用微信开发者工具右键分包目录 → “在资源管理器中打开”,发现里面压根没有你放的图片文件夹。
- 最稳妥做法:所有静态资源统一放项目根目录
static/下,通过相对路径引用(如../../static/logo.png),uni-app 会自动把被该分包引用的资源拷贝进去 - 别把资源塞进子包自己的
assets/或static/目录——除非你配了copy-webpack-plugin,否则它不会被打包 - 如果坚持按子包组织资源,需在
vue.config.js中手动配置插件,例如:const CopyWebpackPlugin = require('copy-webpack-plugin')<br>module.exports = {<br> configureWebpack: {<br> plugins: [<br> new CopyWebpackPlugin([<br> { from: 'subpackageA/assets', to: 'subpackageA/assets' }<br> ])<br> ]<br> }<br>}注意:uni-app Vue2 项目需安装copy-webpack-plugin@5,新版不兼容
CDN 外链资源显示不出来怎么办
外部化不是改个 URL 就完事。微信小程序对网络资源有硬性策略限制,路径、域名、协议、参数全不对就直接拒载。
典型错误:开发时能加载,真机上 403 或空白;控制台无报错,但图片区域始终空着。
- CDN 域名必须提前添加到小程序后台「业务域名」列表,且协议只能是
https,不支持http、IP 地址或端口 -
background-image: url()不接受带查询参数的 URL(如?v=1.0),也不接受base64字符串;纯路径 + 合理缓存头才稳定 - URL 中含中文、空格、特殊符号必须用
encodeURIComponent()编码,比如name=张三要变成name=%E5%BC%A0%E4%B8%89 - 字体必须用
@font-face引入 CDN 地址,不能放static/fonts/再@import;且基础库版本 ≥2.21.0才支持
分包体积超 2MB 却没报错,怎么定位具体文件
微信开发者工具不会明确提示“subpackageA 超限”,而是在上传时静默失败。你得自己查产物目录的真实大小。
运行 npm run build:mp-weixin 后,立刻进入 unpackage/dist/build/mp-weixin/,别信 HBuilderX 构建日志那句“构建完成”。
- Windows 用户:右键分包文件夹(如
subpackageA)→ “属性” → 看“大小”;或用资源管理器“查看 → 详细信息 → 大小”列排序 - macOS 用户:用 Finder 列表视图 → “显示 → 显示简介”,或终端执行
du -sh subpackageA - 重点关注
subpackageA/pages/xxx.js和subpackageA/static/下单个 >500KB 的文件——一张未压缩 PNG 就可能占掉一半 - 配合
npx size-limit检测入口 JS(如subpackageA/pages/index/index.js),能快速暴露冗余依赖或未拆分的大型组件
主包没超但分包里资源还是丢了
根源常在于依赖关系没理清:某个工具函数被主包和两个分包同时 import,uni-app 默认把它打进主包的 common/vendor.js,结果分包里引用时找不到模块。
现象是分包页面报 Cannot find module 'utils/request',哪怕你确认这个文件存在且路径没错。
- 启用分包优化开关,在
manifest.json的mp-weixin配置下加:"optimization": {<br> "subPackages": true<br>} - 禁用模糊的
preloadRule,比如"*"或"pages/**",否则微信会把本该在分包里的资源强行拉进主包,导致分包实际缺失 - 检查是否用了动态拼接路径(如
:src="require('@/static/' + name + '.png')"),Webpack 无法静态分析,会全量打包或漏打包 - 第三方 UI 库(如 uView)若全局引入,其组件代码也会进主包;分包页面要用,必须确保主包完全不 import 它,否则分包 runtime 找不到


















