vite 环境变量和模式

Vite 在特殊的 import.meta.env 对象下暴露了一些常量。这些常量在开发阶段被定义为全局变量，并在构建阶段被静态替换，以使树摇（tree-shaking）更有效。

一、内置常量

常量	类型	作用	示例
import.meta.env.MODE	string	当前运行模式	"development" 或 "production"
import.meta.env.BASE_URL	string	部署应用的基本 URL	"/my-app/"
import.meta.env.PROD	boolean	是否在生产环境	true 或 false
import.meta.env.DEV	boolean	是否在开发环境	true 或 false
import.meta.env.SSR	boolean	是否在服务器端运行	true 或 false

二、环境变量

Vite 自动将环境变量暴露在 import.meta.env 对象下，作为字符串。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

//根目录创建.env文件
VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

三、.env 文件

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

请注意，如果想要在环境变量中使用 $ 符号，则必须使用 \ 对其进行转义。

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

四、环境加载优先级

Vite 的环境文件加载逻辑如下：

1. 加载 .env 文件。
2. 加载 .env.[mode] 文件（例如 .env.production)。
3. 如果同一个变量在多个文件中定义，后加载的文件会覆盖先加载的文件中的值。

示例优先级

文件	变量	值	优先级
.env	VITE_SOME_KEY	value1	低
.env.production	VITE_SOME_KEY	value2	高
最终值	VITE_SOME_KEY	value2

五、HTML 环境变量替换

Vite 还支持在 HTML 文件中替换环境变量。import.meta.env 中的任何属性都可以通过特殊的 %CONST_NAME% 语法在 HTML 文件中使用：

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_SOME_KEY%</p>

如果环境变量在 import.meta.env 中不存在，比如不存在的 %NON_EXISTENT%，则会将被忽略而不被替换(PS:页面会直接显示%NON_EXISTENT%)，这与 JS 中的 import.meta.env.NON_EXISTENT 不同，JS 中会被替换为 undefined。

六、模式

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量：

.env.production文件
VITE_APP_TITLE=My App

在你的应用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染标题。

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想在 staging （预发布）模式下构建应用：

vite build --mode staging

还需要新建一个 .env.staging 文件：

.env.staging文件
VITE_APP_TITLE=My App (staging)

由于 vite build 默认运行生产模式构建，你也可以通过使用不同的模式和对应的 .env 文件配置来改变它，用以运行开发模式的构建：

.env.testing文件
NODE_ENV=development