Vite仅将VITE_开头的变量注入import.meta.env供前端使用，其他变量仅在Node.js中通过process.env访问；按--mode参数加载.env.[mode]等文件，同名变量后加载者覆盖前者。
在 Vite 构建中处理环境变量与模式区分，关键在于理解“谁能看到变量”和“谁加载哪个文件”。Vite 不是把所有 .env 变量都塞进前端代码，而是有明确的暴露规则和加载顺序。
只暴露 VITE_ 开头的变量给前端
Vite 默认只将名称以 VITE_ 开头的变量注入到 import.meta.env 中，供 JS/TS 代码直接使用。其他变量（比如 API_SECRET、NODE_ENV）仅在 Node.js 运行时（如 vite.config.ts）可用，构建后不会出现在浏览器里。
- ✅ 正确写法（前端可访问）：
VITE_API_URL=https://api.dev.example.com - ❌ 错误写法（前端读不到）：
API_URL=https://api.dev.example.com，即使它在 .env 文件里存在 - ⚠️ 注意：访问必须静态，不能拼接 key：
import.meta.env['VITE_' + 'API_URL']会失效
按 mode 加载对应 .env.[mode] 文件
Vite 启动或构建时，会根据当前 --mode 参数（默认开发为 development，构建为 production）加载匹配的环境文件，且遵循严格优先级：
-
.env.[mode].local（如.env.production.local）→ 仅当前 mode 生效，不提交 Git -
.env.[mode]（如.env.staging）→ 仅当前 mode 生效，可提交 -
.env.local→ 所有 mode 都加载，不提交 -
.env→ 所有 mode 都加载，可提交
同名变量后加载的会覆盖先加载的。例如 .env.production 中的 VITE_TITLE 会覆盖 .env 中的同名值。
立即学习“Java免费学习笔记（深入）”；
在 vite.config.ts 中读取非 VITE_ 变量
有些配置只用于构建过程，比如 CDN 地址、版本号、数据库连接信息，你不希望它们出现在前端源码里。这时可以把它们写在 .env 文件中（无需 VITE_ 前缀），然后在 vite.config.ts 里通过 process.env 读取：
- 在
.env.production中添加：BUILD_VERSION=2.4.1 - 在配置中使用：
console.log('构建版本：', process.env.BUILD_VERSION) - 这些值不会进入
import.meta.env，安全性更高
自定义 mode 并配套配置文件
除了默认的 development 和 production，你可以自由定义 mode，比如 staging 或 testing：
- 新建
.env.staging，写入：VITE_API_URL=https://staging-api.example.com - 修改 package.json：
"build:staging": "vite build --mode staging" - 运行
pnpm run build:staging，Vite 就会加载.env.staging并把其中的 VITE_ 变量注入前端
这样一套组合下来，就能安全、清晰、可维护地管理多环境配置。
