VUE前端构建误区及多环境处理

VUE开发过程中难免会碰到多环境的情况，比如development、sit(stage)、uat、production环境等。很多人会误以为npm构建，指定的build:uat，就以为process.env.NODE_ENV就是uat,但实际上并非如此。
经过笔者实践发现，除了build::prod构建出来的包，process.env.NODE_ENV为production外，其他均为development。这给想要区分development、stage、uat环境的同学造成困挠。
为解决这种情况，可使用如下多环境处理方案：
1、在package.json中添加多环境标识
"scripts": {

"dev": "vue-cli-service serve",
"lint": "eslint --ext .js,.vue src",
"build:prod": "vue-cli-service build --mode production",
"build:uat": "vue-cli-service build --mode uat",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"new": "plop",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"

},
2、添加多环境配置文件：

3、在每个环境的配置文件中添加环境标识（VUE_APP_MODE），如下图：

4、后续就可以在代码中针对不同环境进行特殊处理，如下：

注意
VUE配置文件中的变量定义需要以VUE_APP_开头，否则代码中获取到的变量值如空，例如，你定义了一个变量，名称为：payUrl，如果你想在代码中获取到这个变量值，使用process.env.payUrl取到的值是undefined，需要更改为VUE_APP_前缀，如VUE_APP_PAY_URL，后续你就可以在代码中使用process.env.VUE_APP_PAY_URL取到对应的配置项值。