vue3.0 .env 文件配置全局环境变量

文件命名

必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件

文件内容

属性名必须以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