彻底弄懂了Vite中的环境变量和模式

环境变量

Vite 在一个特殊的import.meta.env对象中提供了一些环境变量。这个对象中有一些在所有情况下都可以使用的内建变量：

• import.meta.env.MODE：{string} 应用运行的模式。
• import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由 base 配置项决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD 相反)。
• import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

生产环境替换

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

// ❌ 错误
const key = 'VITE_API_URL';
console.log(import.meta.env[key]); // 无法正常工作！

// ✅ 正确（静态访问）
console.log(import.meta.env.VITE_API_URL);

.env文件

Vite可以在.env文件中配置环境变量。

环境变量文件类型

Vite 支持以下类型的 .env 文件，按 优先级从高到低 排序：

文件名	作用	是否被 Git 忽略
.env.[mode].local	模式专用本地覆盖（如 .env.development.local）	✅ 是
.env.local	通用本地覆盖（所有模式都会加载）	✅ 是
.env.[mode]	模式专用配置（如 .env.production）	❌ 否
.env	通用配置（所有模式都会加载）	❌ 否

解释

• .env.[mode].local：特定模式的本地覆盖文件，适用于特定环境的本地配置，不会被 Git 忽略。
• .env.local：通用的本地覆盖文件，适用于所有模式的本地配置，不会被 Git 忽略。
• .env.[mode]：特定模式的配置文件，适用于特定环境的配置，会被 Git 忽略。
• .env：通用的配置文件，适用于所有模式的配置，会被 Git 忽略。
• 加载顺序：按照优先级由高到低依次加载
• 覆盖规则：同名的环境变量会被更高优先级的文件覆盖，不同名的环境变量会合并。

通过这种方式，你可以更好地管理不同环境下的配置，并确保敏感信息不会被意外提交到版本控制系统中。

示例文件 .env.development：

# 客户端可访问的变量（必须以 VITE_ 开头）
VITE_APP_API_BASEURL=/api
VITE_APP_TITLE=Vite + React + Ts (development)
VITE_DEBUG=true

# 服务端专用变量（非 VITE_ 前缀，仅在 Node.js 中通过 process.env 访问）
SECRET_KEY=123456

场景 1：运行 vite dev（默认 development 模式）
加载顺序：

1. .env.development.local（如果存在）

2. .env.development

3. .env.local

4. .env

场景 2：运行 vite build --mode staging
加载顺序：

1. .env.staging.local（如果存在）

2. .env.staging

3. .env.local

4. .env

在代码中访问环境变量

通过 import.meta.env 访问以 VITE_ 开头的变量：

// 访问环境变量
const apiUrl= import.meta.env.VITE_APP_API_BASEURL
const isDebug = import.meta.env.VITE_DEBUG;

console.log(`API 地址：${
     apiUrl}