Vite 通过环境变量文件、mode 和 import.meta.env 原生区分开发与生产环境，仅 VITE_ 开头变量注入客户端，构建时静态替换、零运行时开销。
在 JavaScript 中使用 Vite 区分开发与生产环境，核心靠 环境变量文件 + 模式（mode）+ import.meta.env 三者配合，无需额外插件，Vite 原生支持，构建时静态替换、零运行时开销。
创建标准环境变量文件
在项目根目录（与 package.json 同级）创建以下文件，内容为纯键值对，不加引号、不加分号：
-
.env.development：开发环境专用，如VITE_API_BASE=http://localhost:3000 -
.env.production：生产环境专用，如VITE_API_BASE=https://api.example.com -
.env（可选）：通用配置，所有模式都加载，适合共用变量（如VITE_APP_TITLE=MyApp）
⚠️ 注意：只有以 VITE_ 开头的变量才会被注入到客户端代码中；NODE_ENV、API_KEY 等非前缀变量不会暴露，保障安全。
通过 mode 控制加载哪组变量
Vite 启动或构建时默认使用 mode：
立即学习“Java免费学习笔记（深入）”；
-
vite→ 自动使用development模式 → 加载.env.development -
vite build→ 默认使用production模式 → 加载.env.production - 自定义模式需显式指定，例如：
vite build --mode staging→ 加载.env.staging
你可以在 package.json 中定义清晰脚本：
"scripts": {
"dev": "vite",
"build": "vite build",
"build:prod": "vite build --mode production",
"build:staging": "vite build --mode staging"
}
在代码中安全读取和使用
所有变量都挂载在 import.meta.env 上，必须用静态属性访问：
- ✅ 正确：
import.meta.env.VITE_API_BASE - ❌ 错误：
const key = 'VITE_API_BASE'; import.meta.env[key]（构建时无法识别，会返回undefined）
推荐封装成配置对象统一管理，例如新建 src/config/env.ts：
export const ENV_CONFIG = {
apiBase: import.meta.env.VITE_API_BASE,
isDev: import.meta.env.DEV,
isProd: import.meta.env.PROD,
mode: import.meta.env.MODE
};
后续所有请求、日志开关、Mock 控制等都基于此对象判断，避免散落多处。
优先级与本地覆盖机制
同名变量按加载顺序覆盖（高 → 低）：
-
.env.[mode].local（如.env.development.local）→ 仅当前 mode 且本地生效，.gitignore默认排除 -
.env.[mode]（如.env.production）→ 主力环境配置，提交到 Git -
.env.local→ 所有 mode 都加载，适合个人密钥（仍需以VITE_开头） -
.env→ 全局兜底，提交到 Git
命令行传入的变量优先级最高，例如：VITE_DEBUG=true vite dev 会覆盖文件中同名定义。
