环境变量和模式 {#env

Vite 在一个特殊的 importa.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

importa.env.MODE: {string} 应用运行的模式。

importa.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

importa.env.PROD: {boolean} 应用是否运行在生产环境。

importa.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 importa.env.PROD相反)。

在生产环境中，这些环境变量会在构建时被静态替换，因此，在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如，动态 key 取值 importa.env[key] 是无效的。

它还将替换出现在 JavaScript 和 Vue 模板中的字符串。这本应是非常少见的，但也可能是不小心为之的。在这种情况下你可能会看到类似 Missing Semicolon 或 Unexpected token 等错误，例如当 "process.env.NODE_ENV" 被替换为 ""development": "。有一些方法可以避免这个问题：

对于 JavaScript 字符串，你可以使用 unicode 零宽度空格 \u200b (一个看不见的分隔符)来分割这个字符串，例如： 'importa\u200b.env.MODE'。

对于 Vue 模板或其他编译到 JavaScript 字符串的 HTML，你可以使用 标签，例如：importa.env.MODE。

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

加载的环境变量也会通过 importa.env 暴露给客户端源码。

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

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

如果你想自定义 env 变量的前缀，请参阅 envPrefix。

安全注意事项

.env.*.local 文件应是本地的，可以包含敏感变量。你应该将 .local 添加到你的 .gitignore 中，以避免它们被 git 检入。

由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中，VITE_* 变量应该不包含任何敏感信息。

默认情况下，Vite 在 vite/client.d.ts 中为 importa.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。

要想做到这一点，你可以在 src 目录下创建一个 env.d.ts 文件，接着按下面这样增加 ImportMetaEnv 的定义：

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

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

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

然而，重要的是要理解 模式 是一个更广泛的概念，而不仅仅是开发和生产。一个典型的例子是，你可能希望有一个 “staging” (预发布|预上线) 模式，它应该具有类似于生产的行为，但环境变量与生产环境略有不同。

你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想为我们假设的 staging 模式构建应用：

为了使应用实现预期行为，我们还需要一个 .env.staging 文件：

现在，你的 staging 应用应该具有类似于生产的行为，但显示的标题与生产环境不同。