配置文件有：

.env 全局默认配置文件，不论什么环境都会加载合并；
.env.development 开发环境下的配置文件;
.env.production 生产环境下的配置文件。

命名规则：

属性名必须以 UE_APP_ 头，比如 VUE_APP_XXX，否则不符合命名规则的属性名环境变量无法被 Vue 加载。

关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载
比如执行npm run serve命令，会自动加载.env.development文件
注意：.env文件无论是开发环境还是生产环境都会加载

如上图所示，如果我们运行npm run serve 就先加载.env文件，之后加载.env.development文件，两个文件有同一个选项，则后加载的文件就会覆盖掉第一个文件，即.env.development文件覆盖掉了.env文件的NODE_ENV选项。

同理如果npm run build 就执行了.env和.env.production。

自定义配置文件

创建一个.env.prod文件，使用npm run build时默认会加载 .env.production 配置文件，但是这里换了名字，就需要在package.json文件中进行配置，通过npm run build :prod即可在运行时，加载对应的配置文件。

{
    ...
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build:prod": "vue-cli-service serve build --mode prod", 
        "build-prod": "vue-cli-service serve build --mode prod", 
    }
    ...
}
// npm run serve 默认加载 mode 为 development 的环境变量配置文件.env.development;
// npm run build 默认加载 mode 为 production 的环境变量配置文件.env.production;
// npm run build:prod 加载 mode 为 prod 的环境变量配置文件.env.prod;
// npm run build-prod 加载 mode 为 prod 的环境变量配置文件.env.prod;
复制代码

使用

① 在vue文件中使用：

② 在js文件中使用：

备注：js文件中可以添加JSON.stringify(xxxxxx)，解析成字符，但是vue中不能。

拓展
Vue中 .env .env.development .env.production 详细说明
vue项目中如何配置env环境
多环境变量配置
vue测试环境、生产环境打包配置
vue 使用生产环境变量