配置文件有:
.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 使用生产环境变量