项目中依赖npm包，npm包内组件引用包内图片资源，进行原生APP-云打包
l***@163.com
- 发布：2021-08-11 08:53
- 更新：2021-08-14 08:55
- 阅读：888
【报Bug】npm包引用包内图片，原生APP-云打包出来的apk，图片无法显示（运行时是没有问题的，无论是H5,小程序,APP）
分类：uni-app
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 专业版
HBuilderX类型： 正式
HBuilderX版本号： 3.1.22
手机系统： Android
手机系统版本号： Android 8.0
手机厂商： 华为
手机机型： ATU-AL10
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
npm包内图片资源，原生APP-云打包出来的应用能正常显示图片
npm包内图片资源，原生APP-云打包出来的应用能正常显示图片
实际结果：
npm包内图片资源，原生APP-云打包出来的应用无法显示图片
npm包内图片资源，原生APP-云打包出来的应用无法显示图片
bug描述：
附件图片中红框内的npm包，包内组件引用了assets目录图片资源（相对路径），原生APP-云打包生成的apk安装后，app内图片无法显示出来。
注意：运行时，无论在H5,微信小程序,安卓模拟器(夜神),安卓真机，图片显示都是正常的！
开发环境产生的app目录结构 和 生产环境产生的app目录结构 不一致。生产环境下会移除node_modules目录
l***@163.com (作者)
调试了你们webpack file-loader配置 无论 开发环境 生产环境，publicPath outputPath 配置输出是一致的，图片是有进行处理的，但是最终整合成.apk时，是否是主动移除了node_modules目录，这个点无法验证
l***@163.com (作者)
暂时的解决方案，APP打包时，小于1G的图片都转成base64
vue.config.js
module.exports = {
configureWebpack: config => {
// 暂时解决原生APP打包，node_modules下的包图片无法显示的问题
if (process.env.UNI_PLATFORM === 'app-plus' && process.env.NODE_ENV === 'production') {
config.module.rules[1].use[0].options.limit = 1024000000;
}
}
}l***@163.com (作者)
缺失的 node_modules 目录，添加到反编译后的apk assets\apps\AppID\www 目录内，然后重新打包 重新签名，安装后图片竟然是可以正常显示的，就搞不懂打包后为啥要把 node_modules 目录去掉（难道是ios有兼容问题？） 贼难受哦 hbuilderx uni-app的作者们
