Vue CLI 3配置多环境变量的方法
vue-cli3 的多环境配置功能，真的是前端开发里的宝藏技巧。是做项目时常常要在开发、预发、生产几个环境里来回切换，用它来管理环境变量，会让你省掉不少麻烦。
项目根目录下加个.env.uat文件，写上VUE_APP_BUILD_TYPE=uat这种格式就行。vue-cli3 只认以VUE_APP_开头的变量，这点一定要记住，不然变量你写了也白写。
NODE_ENV 和 BASE_URL 是两个例外，默认就能在代码里用，开发、生产、测试环境用它们区分逻辑方便。
写package.json时也别忘了加一句"build:uat": "vue-cli-service build --mode uat"，不然你定义的.env.uat根本不会被加载。
实际写逻辑的时候，可以用process.env.VUE_APP_BUILD_TYPE来判断是哪个环境，比如你想在预发跳转到http://a.123.com，上线跳到http://b.123.com，判断一下就搞定了。
还有一点挺关键的，如果你预发环境也按生产方式打包，别忘了在.env.uat里加一句NODE_ENV=production，这样打包出来的体积会小不少，性能也更好。
，vue-cli3 搞环境变量配置还是蛮灵活的，逻辑也不复杂，主要就是文件名要规范、变量名得对，该加的命令别漏掉。如果你也经常折腾多环境，建议现在就配置起来，后面项目跑起来会轻松不少。
文件大小：207.82KB
评论区