Vue CLI4环境变量的配置

在使用Vue CLI4做前端项目开发的时候，通常情况我们都是在项目根目录用中打开命令行工具，通过运行npm run serve来启动我们的本地服务，通过运行npm run build来打包压缩我们的项目，然后把打包后的文件放在服务器上运行，这部分我们也可以叫做生产环境。那如果我们还有一个测试服务器，需要把打包后的文件放到测试服务器中，并且测试服务器中调用的后台接口与生产环境调用的接口路径不一致那又改如何处理呢？这时，我们就需要对CLI4的环境变量进行配置。
如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。

1. 我们要配置测试环境变量，所以在项目根目录中先创建.env.devtest文件作为测试环境变量，然后给.env.devtest文件添加内容如下：

NODE_ENV=环境名称  //我的环境名为devtest
VUE_APP_URL=对应的环境地址 //"http://192.168.1.17:8810"

2. 在package.json中添加测试环境对应的执行语句
   如官方文档所说，可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图：

  "scripts": {
    "buildtest":"vue-cli-service build  --mode devtest",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

3. 结合axios中使用
   在对axios封装时，可以通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。
4. 打包使用
   在控制台中输入npm run buildtest 命令就可以打包测试环境。