背景
公司用 uniapp 开发了一个微信小程序,采购了第三方一部分功能,第三方提供了一些微信的代码,建议使用分包加载。
项目目录结构
wx-thrid-sdk
即第三方提供的分包代码
├── App.vue
├── wx-thrid-sdk
├── index.html
├── main.js
├── manifest.json
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── pages.json
├── static
└── uni.scss
实现思路
-
使用uniapp提供的分包配置方式,配置之后在编译的时候会寻找
wx-thrid-sdk
内的.vue
文件,但是分包内都是微信的原生代码,所以这里找不到会报错 -
既然不能在编译的时候做文章,那就只能在编译之后了
查看uniapp官网,支持在根目录下创建 vue.config.js
文件,配置 webpack
的一些编译选项
既然支持 webpack
, 就可以在 webpack
编译之后,把分包的代码复制到最终生成的代码目录下,并且修改一下生成的微信的 app.json
文件,将分包的配置加入进去即可完成集成。
- 创建
vue.config.js
module.exports = {
configureWebpack: {
plugins: []
}
}
- 复制分包的代码到最终生成的代码目录下
使用 copy-webpack-plugin
即可满足我们的需求,安装
npm install copy-webpack-plugin@5.0.0 --save-dev
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'wx-thrid-sdk'),
to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV