前提：各种vue环境已经配置完毕，vue-cli脚手架安装好。
1.在项目根目录创建如下图所示三个文件，分别取名为 .env.development .env.production .env.test

2.然后在这三个文件里依次写入如下内容：

NODE_ENV = ‘development’
VUE_APP_CURENV = ‘development’

NODE_ENV = ‘production’
VUE_APP_CURENV = ‘production’

NODE_ENV = ‘test’
VUE_APP_CURENV = ‘test’

3.在项目vue.config.js文件里添加如下代码（没有vue.config.js的可以手动在项目根目录创建）

switch(process.env.VUE_APP_CURENV){
case ‘development’:
console.log(‘当前运行环境为：开发环境’)
break;
case ‘test’:
console.log(‘当前运行环境为：测试环境’)
break;
case ‘production’:
console.log(‘当前运行环境为：生产环境’)
break;
}

4.在项目api.js里添加如下代码（api.js为项目中封装axios文件，可以根据自己实际封装情况而定；其中comUrl为公共接口地址，可根据自己项目实际情况而定）

switch(process.env.VUE_APP_CURENV){
case ‘development’:
comUrl = ‘http://localhost:3333’;
break;
case ‘test’:
comUrl = ‘http://localhost:5555’;
break;
case ‘production’:
comUrl = ‘http://localhost:6666’;
break;
}

5.打开package.json文件，修改打包命令如下图
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build --mode production”,
“build:test”: “vue-cli-service build --mode test”,
“lint”: “vue-cli-service lint”
},

至此我们的项目已经配置完毕了，然后可以通过npm run serve启动项目，npm run build 打包项目（生产环境）npm run build:test 打包项目（测试环境）


PS:可以仿照上面配置配置其他各种环境例如培训环境等等。