Vite通过VITE_前缀暴露环境变量，加载顺序为.env.[mode].local > .env.[mode] > .env.local > .env，支持自定义模式和多前缀配置，需用loadEnv读取并配合define注入全局常量。
直接在项目根目录放 .env 文件，配合 VITE_ 前缀和模式文件（如 .env.development、.env.production），就能让不同环境自动加载对应变量。关键不是写多少文件，而是理解加载顺序和前缀规则。
环境变量怎么写才生效
Vite 只把以 VITE_ 开头的变量暴露给前端代码，其他变量（比如 DB_PASSWORD 或 API_KEY）根本不会进打包产物，这是硬性安全机制。
- ✅ 正确写法：
VITE_API_BASE_URL=https://api.example.com→ 可在代码中用import.meta.env.VITE_API_BASE_URL访问 - ❌ 错误写法：
API_BASE_URL=https://api.example.com→ 前端读出来是undefined - 如果团队已有命名习惯（比如沿用
REACT_APP_），可在vite.config.js中改前缀：envPrefix: ['REACT_APP_', 'VITE_'] - ⚠️ 千万别设
envPrefix: ''，否则所有变量都暴露，有严重安全风险
多环境文件怎么组织
Vite 按固定优先级加载环境文件，高优先级的同名变量会覆盖低优先级的。实际开发中建议按这个结构建：
-
.env：放所有环境共用的默认值，比如VITE_APP_TITLE=我的应用 -
.env.development：开发专用，比如VITE_API_BASE_URL=http://localhost:3000/api -
.env.production：生产专用，比如VITE_API_BASE_URL=https://api.prod.com -
.env.local：本地个性化配置（如你自己的 mock 开关），会被.gitignore忽略，不提交
加载顺序从高到低：.env.[mode].local > .env.[mode] > .env.local > .env
立即学习“Java免费学习笔记（深入）”；
启动命令怎么对应模式
Vite 默认识别 development 和 production 两种模式，但你可以自定义，比如加个预发环境 staging：
- 新建
.env.staging文件，填 staging 环境的 API 地址、开关等 - 在
package.json里加脚本："dev:staging": "vite --mode staging" - 运行
npm run dev:staging时，Vite 就会自动加载.env.staging和.env - 代码里可通过
import.meta.env.MODE判断当前模式，做差异化逻辑
配置文件里怎么读取环境变量
不要直接用 process.env，Vite 启动时变量还没加载完。要用官方推荐的 loadEnv 工具：
- 在
vite.config.js开头引入：import { loadEnv } from 'vite' - 配置导出函数：
export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { define: { __APP_VERSION__: JSON.stringify(env.VITE_APP_VERSION) } }; }) -
loadEnv会按当前mode自动匹配文件，并返回合并后的对象 - 搭配
define配置，可以把变量注入为全局常量，构建时静态替换，更高效
