【Vue打包环境全局配置process.env.NODE_ENV和process.env.VUE_APP_ENV的用法】

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

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