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 可以支持多种环境打包，等我亲测一下，再补充。