.env 文件基础

Vite 支持使用 .env 文件定义环境变量，用于区分不同环境的配置。

创建 .env 文件

# .env - 所有环境共享
VITE_APP_TITLE=My App
VITE_API_BASE=/api

# .env.development - 开发环境
VITE_API_URL=http://localhost:3000
VITE_DEBUG=true

# .env.production - 生产环境
VITE_API_URL=https://api.example.com
VITE_DEBUG=false

# .env.staging - 预发布环境
VITE_API_URL=https://staging-api.example.com

环境文件加载顺序

.env                # 所有环境加载
.env.local          # 所有环境加载，被 git 忽略
.env.[mode]         # 指定模式加载
.env.[mode].local   # 指定模式加载，被 git 忽略

注意：只有 VITE_ 前缀的变量才会暴露给客户端代码。

VITE_ 前缀规则

# 会暴露给客户端
VITE_API_KEY=xxx       # ✓ 可访问
VITE_APP_TITLE=My App  # ✓ 可访问

# 不暴露给客户端
API_SECRET=xxx         # ✗ 不可访问
DB_PASSWORD=xxx        # ✗ 不可访问

指定模式

# 使用 development 模式（默认）
npm run dev

# 使用 production 模式
npm run build

# 使用自定义模式
vite --mode staging

文件位置配置

export default defineConfig({
  envDir: './config'  // 默认为项目根目录
})

要点总结

• .env 文件定义环境变量
• 只有 VITE_ 前缀变量暴露给客户端
• 按模式和优先级加载文件
• .env.local 用于本地敏感配置