.env 文件配置详解

.env 文件配置

文件说明

.env：全局默认配置文件，无论什么环境都会加载合并。

.env.development：开发环境的配置文件

.env.production：生产环境的配置文件

注意：三个文件的文件名必须按上面方式命名，不能乱起名，否则读取不到文件。

内容格式

注意：属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX

加载

vue 会根据启动命令自动加载相对应的环境配置文件。

开发环境加载 .env 和 .env.development 。

生成环境加载 .env 和 .env.production 。

优先级

环境配置文件 > 全局配置文件

当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项

如：

开发环境

20200819143030682.png

打印 process.env 属性

20200819143120444.png

从上面图片中可知，.env 中的全局属性 VUE_APP_PREVIEW 与 VUE_APP_API_BASE_URL 被覆盖。

.env 中的全局属性 VUE_APP_AGE 被保留。

项目中的使用

在配置文件中定义的属性在其它文件中如何访问呢？？

可以使用 process.env.xxx 来访问属性。

如：

20200819143813504.png

20200819143850984.png

笔记原文参考 https://blog.csdn.net/cezlz/article/details/108100460