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