vue 中 .env,.env.development,.env.production 说明

配置文件有:

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

命名规则:

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

image.png image.png

关于文件的加载:

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

1660448119321.png

如上图所示,如果我们运行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文件中使用:

image.png

② 在js文件中使用:

image.png

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

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

分类:
前端
标签: