环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

这里有一些在所有情况下都可以使用的内建变量：

• import.meta.env.MODE 应用运行的模式

• import.meta.env.BASE_URL 部署应用时的基本 URL

• import.meta.env.DEV 应用是否运行在开发环境

• import.meta.env.PROD 应用是否运行在生产环境

• import.meta.env.SSR 应用是否运行在 server 上

.env文件

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

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

加载的环境变量会通过 import.meta.env 以字符串形式暴露给客户端源码。

只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

例如下面这些环境变量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

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

HTML 环境变量替换

import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用：

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

模式

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

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

# .env.production
VITE_APP_TITLE=My App

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。

譬如：

vite build --mode staging

此时对应的执行文件为：.env.staging。

# .env.staging
VITE_APP_TITLE=My App (staging)