vue项目webpack根据不同环境打包不同的文件

需求简介:不同的区域获取不同的功能权限目录,打包的时候不将全部前端文件打包进去,各个地区有哪些功能 就打包哪些功能的文件,分区域部署。

思路: 1.构建一个下webpack的环境变量,再在npm run build --XX 带不同参数
2.这样不同的npm 命令就会有不同的环境变量
3.router.js 里再根据环境变量来注册路由

步骤

1.首先 用.env文件配置全局环境变量,下图举例一个环境变量,之后根据环境变量参数来打包。
在这里插入图片描述
在这里插入图片描述
2 .webpack NormalModuleReplacementPlugin插件配置 config.js文件

  configureWebpack: config => {
    const plugins = []
    plugins.push(
      new webpack.NormalModuleReplacementPlugin(/.*dev\./,
      function (resourse) {
          var str = appTarget.replace("\"","").replace("\"","");
          resourse.request = resourse.request.replace(/dev/, `${str}`);
      }),
    )
    config.plugins = [...config.plugins, ...plugins]
  },

3.配置package.json文件
在这里插入图片描述

4.配置不同的路由文件
在这里插入图片描述
5. 打包命令:npm run build --test

题外话:
有此需求的其实还可以看一下阿里针对微前端开发的一款框架 【乾坤(qiankun)】
将独立子应用程序编入到主系统中。
保证子应用相互隔离等等
github:https://github.com/umijs/qiankun

Logo

前往低代码交流专区

更多推荐