vue项目通过不同build命令实现分模块打包

基于vue-element-admint的框架
场景：
项目中分为多个模块A、B、C，且模块之间没有关联，当项目对外发布时，可能需要不同组合如 A+B，A+C。
实现思路：
通过配置多个路由文件routerA.js、routerB.js,其中routerA 中包含A+B模块，路由routerB中包含A+C模块，然后通过配置build传不同参数，判断替换页面中引入的路由文件。
第一步 创建路由文件

其中routerA.js、routerB.js是默认路由index.js（包含所有模块）的copy，区别就是引入了不同模块。
第二步 在package.json中添加build命令

第三步
在vue.config.js
configureWebpack 下面添加plugins 配置项

const webpack = require('webpack')

  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/(.*)router\/index|(.*)\/router/, function(resource) {
        const rawArgv = process.argv.slice(2) // 获取build 后参数
        const params = rawArgv.join()
        if (params === '--mis') {
          resource.request = resource.request.replace(/(.*)router\/index|(.*)\/router/, '@/router/indexB')
        } else if (params === '--cis') {
          resource.request = resource.request.replace(/(.*)router\/index|(.*)\/router/, '@/router/indexA')
        }
      })
    ],
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

NormalModuleReplacementPlugin 可以替换页面中的引入，详情参考webpack文档
当执行 npm run build:prod 使用默认路由index.js
执行npm run build:prodmis 使用默认路由indexB.js
OK