vue自动切换测试和线上环境 配置

一、首先

将统一的环境分开例如:

vue自动切换测试和线上环境 配置_第1张图片
原本在 env.js 文件里的开发环境和测试环境
vue自动切换测试和线上环境 配置_第2张图片
分别写到config文件夹 dev.js 和 prod.js里

第二步

再安装cross-env插件: npm install cross-env -D
之后 vue自动切换测试和线上环境 配置_第3张图片
分别在运行和打包的指令 分别配置测试 和 生产 (加深绿色代码段)

第三步

项目目录创建vue.config.js 文件
配置

chainWebpack : config => {
    config.plugin("define").tap(args => {
      args[0]["process.env"].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV);
      return args;
    });
  }
  其中process.env是args中的常量  BUILD_ENV是自定义的名

process.env.BUILD_ENV;

vue自动切换测试和线上环境 配置_第4张图片

最后

在封装接口的位置调用
vue自动切换测试和线上环境 配置_第5张图片
具体内容可以使用console.log() 查看

以上仅个人练习时的思路 仅供参考

你可能感兴趣的:(vue)