Vue中 env 文件是如何读取的？ 优先级？

Vue中 env 文件是如何读取的？ 优先级？

start

• 今天来研究一下 Vue 中 env 是如何读取的。跟着我的脚步来学习一下吧。
• 作者：番茄；
• 编写时间：2023/11/30

前情提要

env，使用方式是process.env。简单来说，他就是nodejs上下文中的一个对象。主要用它来存储针对不同环境的一些环境变量，然后方便我们一套代码，兼容多种环境。

说白了，env 就是一个存储配置信息的对象；

本文的主要目的：掌握 在 vue 项目中如何设置并使用这个 env 环境变量。

有关 env 变量更加全面的介绍。可以参考：vue项目中的 env文件从何而来？什么是 process.env

官方文档

vue-cli-官方文档

env 具体使用

1. 默认的模式

依据上方的官方文档截图可以了解到，默认有三种模式

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

我在 main.js 中打印 process.env，然后运行 npm run serve，实际运行的命令为 vue-cli-service serve，此时它的模式为 development

效果图

总结

由上面的截图可以知，当我们运行开发环境的命令是。默认的环境变量为： {"NODE_ENV":"development","BASE_URL":"/"}

2. 增加配置文件 env

上一节我们打印了基础的环境变量，这一节我们尝试增加我们的环境变量。

在项目的根目录新增一个 .env 的配置文件，编写如下内容：

name=lazyTomato
key=env
version=0.0.1

然后重新运行：npm run serve

效果图

看到上述截图，发现我们的环境变量配置信息居然没有发生任何改变。然后我们查看官方文档，对此做了说明

请注意，只有 NODE_ENV，BASE_URL 和以 `` 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

我们修改一下 .env 文件，重新运行。注意：修改了env文件后，需要重启服务，因为每次启动服务会读取当前环境信息，不会热更新

VUE_APP_name=lazyTomato
VUE_APP_key=env
VUE_APP_version=0.0.1

# 注释： 一般情况下，为了统一规范，建议 key的命名：全大写，下换线连接。

效果图

总结

本节内容，主要是尝试了通过配置文件的方式增加我们全局环境变量的配置，然后需要了变量不生效的情况。所以在定义变量的时候，需要注意：

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

3. 环境文件的读取的优先级。

官方文档的说明：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

为了实验 .env 文件读取的优先级，我分别定义 .env 和 .env.development和 .env.development.local 文件分别定义相同和不相同的配置信息。看一下系统如何打印。

效果图

总结

1. 环境配置文件优先级： .env.development.local > .env.development > .env

2. 三个文件都会被读取。

3. .local 文件会被git忽略。

4. 手动指定mode

"serve": "vue-cli-service serve --mode=tomato"

效果图

总结

手动指定mode即可。

end

在 Vue中使用 env，底层原理还是 vue-cli-service 内部集成了对 .env 配置文件的处理，并加载到 process.env 上。

1. 加载文件优先级： .env.development.local > .env.development > .env；
2. 可手动指定mode。
3. 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量才会被读取。