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