vue cli-3.x4.x版本多环境配置改变从行动开始。vue cli版本越来越高，相应的其多环境配置也会有所不同。今

前言

改变从行动开始。vue cli版本越来越高，相应的其多环境配置也会有所不同。今天给大家带来vue cli 3.x 4.x版本项目的多环境配置。

1.创建配置文件

在与package.json的同级目录下创建三个文件.env.uat / .env.development / .env.production

.env.development

默认dev环境，NODE_ENV的值默认为development，当我们执行npm run serve或者npm run dev会读取文件。/api为代理，因为此文件为开发环境文件。注意定义环境变量一定得以VUE_APP_开头，这样才会被识别。 VUE_APP_ENV为自定义区分多环境变量字符，VUE_APP_BASE_API为请求的url前缀（服务器url），VUE_APP_VERSION为自定义项目版本号

VUE_APP_ENV=development
VUE_APP_BASE_API = /api
VUE_APP_VERSION = '版本号0.0.2'

.env.production
默认打包线上环境，NODE_ENV的值默认为production，npm run build指令会读取此文件。

VUE_APP_ENV=production
VUE_APP_BASE_API = http://8.129.178.159/wmsApi
VUE_APP_VERSION = '0.0.2'

.env.uat
前面两个都是默认环境，有着默认指令， .env.uat 才是真正新增的环境所以得配置新的指令。因为是新增的环境，默认NODE_ENV会重复，所以之定义NODE_ENV。

NODE_ENV=uat
VUE_APP_ENV=uat
VUE_APP_BASE_API = http://8.129.178.159/wmsApi
VUE_APP_VERSION = '0.0.2'

2.新增uat环境指令

package.json文件中添加指令，npm run serve2 启动和npm run build:uat打包都会读取此文件环境变量。

"serve2": "vue-cli-service serve --mode uat",
"build:uat": "vue-cli-service build --mode uat"

结束语

改变从行动开始。多环境配置其实通常配合axios封装，http封装，以及项目配置文件vue.config.js中配置的代理以及打包配置一起使用。具体可以参考我的下一篇将带来的axios和http封装。也可以参考我的开源项目链接。项目上面axios封装，http封装以及vue.config.js配置都已经配置好。希望能给大家带来一点帮助。