Vite 处理环境变量文件

Vite 在处理环境变量文件时，遵循一套明确的加载规则和优先级顺序。这确保了在不同开发和构建模式下能够灵活地配置环境变量。

Vite 环境变量文件的加载顺序和优先级

Vite 使用 dotenv 来加载 .env 文件中的环境变量。加载顺序和优先级从高到低如下：

1. 系统环境变量：在执行 Vite 命令时已经存在的环境变量具有最高优先级，不会被 .env 文件覆盖。例如，通过命令行设置的环境变量 VITE_SOME_KEY=123 npm run dev。

2. 模式特定的本地文件：例如 .env.production.local 或 .env.development.local。这些文件只在对应的模式下加载，且优先级高于通用的模式文件和 .env 及 .env.local 文件。这些文件通常用于本地覆盖特定模式下的配置，并且应该被 git 忽略。

3. 模式特定的文件：例如 .env.production 或 .env.development。这些文件只在对应的模式下加载。

4. 本地文件：.env.local 文件在所有情况下都会加载，但它的优先级低于模式特定的文件。这个文件通常用于本地开发，可以包含一些敏感信息，因此应该被添加到 .gitignore 文件中以避免被提交到版本库。

5. 通用文件：.env 文件在所有情况下都会被加载，它的优先级最低。

总结优先级如下：

系统环境变量 > .env.[mode].local > .env.[mode] > .env.local > .env

不同文件的用途

• .env: 用于存放所有环境下共享的通用变量。
• .env.local: 用于存放本地开发环境的变量，会覆盖 .env 中的同名变量。此文件应被 git 忽略。
• .env.development: 用于开发模式 (development mode) 下的特定变量。
• .env.production: 用于生产模式 (production mode) 下的特定变量。
• .env.test: 用于测试模式 (test mode) 下的特定变量。
• .env.prod.local: 根据上述规则，这将被视为 prod 模式下的本地配置文件。如果你的模式是 prod，那么它将被加载。

在代码中访问环境变量

在 Vite 中，为了防止意外地将敏感信息泄露到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 Vite 处理的代码。 你可以通过 import.meta.env 对象来访问这些变量。

例如，在 .env 文件中定义：

VITE_APP_TITLE=My Awesome App
DB_PASSWORD=secret

在你的客户端代码中：

console.log(import.meta.env.VITE_APP_TITLE); // "My Awesome App"
console.log(import.meta.env.DB_PASSWORD);   // undefined

模式 (Mode)

Vite 中的“模式”是一个重要的概念，它决定了加载哪些 .env 文件。默认情况下，dev 命令在 development 模式下运行，而 build 命令在 production 模式下运行。 你可以通过在 package.json 的 scripts 中添加 --mode 标志来改变模式。

例如，要以 staging 模式运行构建：

"scripts": {
  "build:staging": "vite build --mode staging"
}

在这种情况下，Vite 将会加载 .env.staging 和 .env.staging.local 文件（如果存在）。

在 vite.config.js 中使用环境变量

需要注意的是，Vite 在加载 vite.config.js 时，默认情况下不会加载 .env 文件。 如果你需要在配置文件中使用环境变量，可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

// vite.config.js
import { defineConfig, loadEnv } from 'vite'

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return defineConfig({
    // ...
  })
}