文件命名
必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件
| 命名 | 说明 | 加载 |
|---|---|---|
| .env | 全局默认，任何环境都加载合并 | |
| .env.development | 开发环境下的配置文件 | npm run serve |
| .env.production | 生产环境下的配置文件 | npm run build |
文件内容
属性名必须以VUE_APP_开头，比如VUE_APP_XXX
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用
.env (serve默认的环境变量)
NODE_ENV = 'development'
VUE_APP_BASE_API = 'https://demo.cn/api'
VUE_APP_URL = 'https://wechat-timg.oss-cn-hangzhou.aliyuncs.com/demo'
.env.production (build默认的环境变量)
NODE_ENV = 'production'
VUE_APP_BASE_API = 'https://demo.com/api'
VUE_APP_URL = 'https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo'
.env.analyz (用于webpack-bundle-analyzer打包分析)
NODE_ENV = 'production'
IS_ANALYZ = 'analyz'
VUE_APP_BASE_API = 'https://demo.com/api'
VUE_APP_URL = 'https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo'
修改package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"analyz": "vue-cli-service build --mode analyz",
"lint": "vue-cli-service lint"
}
文件的加载
根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”
比如执行npm run serve命令，会自动加载.env.development文件
获取环境变量
通过process.env.VUE_APP_XXX获取环境变量
（全局属性，任何地方均可使用）
data():{
return{
url:process.env.VUE_APP_URL
}
}
参考：https://blog.csdn.net/w405722907/article/details/94720868
https://segmentfault.com/a/1190000017008697
