关于javascript: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取到对应的配置项值。