Vue打包环境全局配置process.env.NODE_ENV和process.env.VUE_APP_ENV的用法即注意事项

在vue项目实际开发过程中,有本地环境、测试环境、预生产、生产环境等等,不同环境对应的配置会不一样。本文详细介绍了不同的.env文件实现差异化配置

1、文件说明
请添加图片描述
.env: 全局默认配置文件,所有环境(开发、测试、生成等)均会加载并合并该文件。
.env.development: 开发环境的配置文件 lab pre 等 对应相对的环境 以此类推 其他几个分别对应不同的环境请求配置。
注:以上三个文件的命名为固定格式,不能改变,否则读取不到文件。.env文件在实际开发中可以省略,如果所有配置都写在对应的文件中。

.env

# 开发环境
NODE_ENV = "development"
VUE_APP_API = "/api"
# 图片URL
VUE_APP_IMAGE_URL = "http://xxx.xxx.xxx.xxx:xxxx"

.env.sit

# SIT环境 - (System Integration Testing)系统集成测试
NODE_ENV = "production"
VUE_APP_API = "/sit_online"
# 图片URL
VUE_APP_IMAGE_URL = "http://sit_online/"

.env.uat

# UAT环境 - (User Acceptance Testing)用户验收测试
NODE_ENV = "production"
VUE_APP_API = "/uat_online"
# 图片URL
VUE_APP_IMAGE_URL = "http://uat_online/"

.env.pre

# PRE环境 - (Pre Production)预生产
NODE_ENV = "production"
VUE_APP_API = "/pre_online"
# 图片URL
VUE_APP_IMAGE_URL = "http://pre_online/"

.env.production

# 生产环境 - (Production)生产
NODE_ENV = "production"
VUE_APP_API = "/online"
# 图片URL
VUE_APP_IMAGE_URL = "http://online/"

注:NODE_ENV=“production"不同的环境上线时,基本上都需要使用"production"环境,因为这里有个问题个人没有解决,如环境配置时使用其他的字段,例如"sit”,打包配置中的configureWebpack通过判断(process.env.NODE_ENV === “sit”)去掉log注释的插件可能不生效,即上线后同样会有log打印。使用production则生效(个人使用时的发现的BUG,寻找很久没找到解决方案,如果您有更好的配置方式指点一下,谢谢!)

注:全局环境配置添加变量时必须使用VUE_APP_,即 VUE_APP_XXXXXX,这是配置规则,否则通过process.env.VUE_APP_XXXXX获取不到

2、 文件读取
Vue会根据启动命令自动加载对应的环境配置文件。
在package.json内配置好相关的映射匹配。请添加图片描述

3、运行及打包
npm run serve 本都运行开发模式development
模式将NODE_ENV的值设置为模式名称
不同的环境,根据package.json中的scripts中的配置打包
打包sit环境,即运行 npm run build:sit
打包uat环境,即运行 npm run build:uat
打包pre环境,即运行 npm run build:pre
打包production环境,即运行 npm run build:prod

总结 实现不同环境的动态配置。
这个是本人项目开发使用的方式和遇见的一些注意事项,如您有更好的方式请多多指教,与君共勉!谢谢!

Logo

前往低代码交流专区

更多推荐