注：本篇博客是基于
vue-cli 2.9.6版本
vue-cli默认自带production和development两种开发环境，但是在实际工作中一般还有测试环境、预发布环境等，可以修改package.json添加新的打包命令，可以从而根据不同环境自动切换接口的BASE_URL,所以本篇文章将以添加测试环境为例，演示如何添加环境
新增新环境变量文件
项目的环境变量文件都在项目根目录下的
config文件夹下，默认有两种环境变量文件,即dev.env.js和prod.env.js,我们直接复制生产环境的配置文件prod.env.js,将其名称改为test.env.js并将其中的NODE_ENV属性修改为自己想要的环境名称，这里以test为例,记得加引号
'use strict'
module.exports = {
NODE_ENV: '"test"',
BASE_URL:"XXXXXXXX"
}
新增webpack配置文件
在项目根目录下的
build文件夹下，复制build.js文件，并改名为test.js,并按以下进行修改
process.env.NODE_ENV = 'test'
const spinner = ora('building for test...') //打包时的提示文本
在项目根目录下的
build文件夹下，复制webpack.prod.conf文件，并改名为webpack.test.conf,并按以下进行修改
const env = require('../config/test.env')
给新环境添加打包指令
找到项目根目录下的
package.json文件，在scripts属性中添加一条指令
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"test": "node build/test.js" //新增
}
使用
- 使用新指令进行打包
使用新添加的命令
npm run test进行测试环境的打包
F:\Project\CZ4.2>npm run test
> cz@1.0.0 test F:\Project\CZ4.2
> node build/test.js
\ building for test...{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
/ building for test...
- 根据不同环境自动切换
api地址
可以通过
axios统一管理接口，然后api前面的地址部分，用一个变量baseUrl接受，process.env.NODE_ENV获取运行/打包时的环境，从而给baseUrl赋值不同环境对应的地址，达到自动化的效果
