提前拆分模块任务，把主包压缩小点，UI设计给了太多本地资源静态图，所以需要连图也一起分包，记录下

· 整个小程序所有分包大小不超过 20M
· 单个分包/主包大小不能超过 2M

结果

静态资源生成路径

1
2
3
/mp-weixin/pages_tools/pages // 分包代码

/mp-weixin/pages_tools/static // 分包静态资源

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const webpack = require('webpack')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

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

根目录执行命令

1
npm install copy-webpack-plugin --save-dev

manifest.json

1
2
3
"mp-weixin": {    
      "usingComponents": true
  }

pages.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
"subPackages": [
   {
     "root": "pages_index", // 首页
     "pages": [
       {
         "path": "index",
         "style": {
           "navigationStyle": "custom"
         }
       }
     ]
   },
   {
     "root": "pages_tools", // 工具
     "pages": [
       {
         "path": "test/index",
         "style": {
           "navigationBarTitleText": "uni-app"
         }
       }
    }，
    {
     "root": "pages_salary", // 工资
     "pages": [
       {
         "path": "test/index",
         "style": {
           "navigationBarTitleText": "uni-app"
         }
       }
    }

static

图片资源分包，文件夹取名也需要对应pages.json下的文件夹命名

1
2
/pages_tools/static/images
// 放图片的文件夹，用于放分包图片资源，需要和分包名称对应

在index.vue内引入图片路径：

1
<image src="/pages_tools/static/images/test.svg" />