vue在生产环境、测试环境和开发环境，三种环境下配置不同的api地址

vue在生产环境、测试环境和开发环境，三种环境下配置不同的api地址

我们大多数在开发的时候，都会有三种环境，一个是开发环境，一个是测试环境，一个是生产环境，我们打包的时候需要根据不同的环境去加载不同的API地址。
用vue-cli2打包的vue项目中可以根据更改配置文件，达到我们想要的效果。

1 . 更改package.josn文件

在package.json文件的script文件下添加"test": "node build/build.js",
如下所示：

  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "test": "node build/build.js",   //添加这一行代码
    "lint": "eslint --ext .js,.vue src"
  },

2. 更改config/prod.env.js文件

如下所示：

var targetEvent = process.env.npm_lifecycle_event;
if (targetEvent == 'test') {
  var obj = {
    NODE_ENV: '"development"'
  }
} else if (targetEvent == 'build') {
  var obj = {
    NODE_ENV: '"production"'
  }
}
module.exports = obj;

3. 在main.js文件中添加

由于我的api地址不在一台服务器上，需要的API地址较多，所以我放到一个josn文件下，方便管理。（如果不知道怎么用，可查看我的上一篇vue生产环境和开发环境配置不同的api地址）

//引入api文件
import apiConfig from '../static/apiConfig.json'   //测试api存放的地址
import apiConfigPro from '../static/apiConfig_cm_prod.json'  //生产api存放的地址

var env = process.env.NODE_ENV;
var apis;
if (env == 'development' || env == 'test') {
  apis = apiConfig;
} else if (env == 'production') {
  apis = apiConfigPro;
}

4. 开始打包

本地调试指令不变:

npm run dev

打包测试环境：

npm run test

打包生产环境：

npm run build

其实就是添加了一个生产环境的打包命令。

听说vue-cli3 可以支持多种环境打包，等我亲测一下，再补充。