vue-cli 自定义交互式命令环境及多配置打包

用vue-cli跑项目的命令：

npm  run serve 是不压缩文件，直接加载源码，并且此时的process.env.NODE_ENV是 development

npm run build   命令会打包代码，并且此时的process.env.NODE_ENV是 production

因此在发送请求的时候通过process.env.NODE_ENV就能很好的区分要请求的后端接口路径

但是最近遇到一个问题，我想要打包之后的代码分成测试环境和生产环境，但是通过npm run build打包之后的process.env.NODE_ENV统一都是production，就无法区分了，小朋友你是否有很多问号，接下来就说一下我的解决方案八

 

1.在package.json中，添加一句打包到测试环境的命令

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode build",
    "test": "vue-cli-service build --mode test",
  },

2.在根目录创建.env.test和.env.build文件（文件名的后缀要和package.json中配置mode的一样，开头统一为.env），增加变量VUE_APP_TITLE，注意变量名必须是VUE_APP_开头才可以

.env.build

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

.env.test 这里写NODE_ENV 是production是为了让test环境打包之后的结果和production一致

NODE_ENV = 'production'
VUE_APP_TITLE = 'test'

3.以上两步环境打包就已经配置好了，接下来是运行命令，分别执行npm run build 和 npm run test，并打印出process.env.VUE_APP_TITLE，就能看到不同的打包命令生成的process.env.VUE_APP_TITLE是不一样的

4.根据process.env.VUE_APP_TITLE区分请求接口的地址

let api = "https://api.development.yazhishaw.com"; // 默认不打包请求开发环境的接口
console.log("env", process.env.VUE_APP_TITLE);

if (process.env.VUE_APP_TITLE === "production") { // production环境请求生产环境接口
  api = "https://api.production.yazhishaw.com";
} 
else if (process.env.VUE_APP_TITLE === "test") { // test环境请求测试环境接口
  api = "https://api.test.yazhishaw.com";
} 

5.然后就可以调用不用环境的接口了，比如：

// 根据省市获取医院
export async function getAreaSearchApi(query = {}) {
  const resp = await axios.get(
    `${api}/national-hospital/search`,
    {
      params: query,
    }
  );
  return resp.data;
}