uni-app项目分包后子包中静态资源丢失

前情

uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验非常棒，公司项目就是主推uni-app。

坑位

随着项目越做越大，发现小程序的包体积已经超过了小程序单包最高2M的限制，于是对项目进行了分包处理，在分包过种中真正占项目体积的其实是静态资源文件，所以在分包的时候自然也会把子包对应的静态资源文件放到子包中，发现子包无法访问到子包自己的静态资源文件。

Why?

对于这个问题当时是一脸蒙，于是我通过查看uppackage/dist/dev/mp-weixin最终输出文件，发现子包的静态文件并没有打包进来，应该是hbuilderx忽略了子包下的非页面目录。在论坛了解到，开启分包优化是会把子包的static打包过去的，但是分包优化又只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-kuaishou几个平台。

解决方案

方案1（推荐）：

其实uniapp官方应该是做了特殊处理，只要你子包的静态资源放到static下，我一开始把静态文件都放到assets下了导致文件丢失，你无需开启什么分包优化也是可以自动打包过去的，至少目前我测了微信，支付宝，京东都是没有问题

方案2：

修改vue.config.js配置，通过copy-webpack-plugin插件让webpack拷贝到指定子包里来解决资源丢失的问题。

示例代码如下（此处假设我的子包目录为packageOrderForm）

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
	...
	configureWebpack: {
			plugins: [
				new CopyWebpackPlugin([
						{
							from: path.join(__dirname, '/packageOrderForm/assets'),
							to: path.join(__dirname+'/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/packageOrderForm/assets')
						}
					])
			]
		},
		...
}

注：因为uniapp vue2项目使用的webpack版本较低，你不能直接npm i copy-webpack-plugin安装，会不兼容，你可以通过npm i copy-webpack-plugin@5来安装5+版本的插件来避开这个兼容问题。