H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue项目通过不同build命令实现分模块打包

基于vue-element-admint的框架
场景:
项目中分为多个模块A、B、C,且模块之间没有关联,当项目对外发布时,可能需要不同组合如 A+B,A+C。
实现思路:
通过配置多个路由文件routerA.js、routerB.js,其中routerA 中包含A+B模块,路由routerB中包含A+C模块,然后通过配置build传不同参数,判断替换页面中引入的路由文件。
第一步 创建路由文件
image.png
其中routerA.js、routerB.js是默认路由index.js(包含所有模块)的copy,区别就是引入了不同模块。
第二步 在package.json中添加build命令
image.png
第三步
在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 使用默认路由indexA.js
OK

本文地址:H5W3 » 【前端技术】vue项目通过不同build命令实现分模块打包

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址