Vite 如何使用环境变量？有哪些内置的环境变量？

Vite 提供了强大的环境变量支持，开发者可以通过环境变量管理不同环境的配置。以下是 Vite 环境变量的使用方法：

环境变量文件：

Vite 支持以下环境变量文件（按优先级从高到低）：

1. .env.local：本地覆盖，不应提交到版本控制
2. .env.[mode].local：特定模式的本地覆盖
3. .env.[mode]：特定模式的环境变量
4. .env：所有环境通用的环境变量

其中 [mode] 可以是 development、production 或自定义模式。

环境变量定义：

bash
# .env
VITE_APP_TITLE=My App
VITE_API_URL=https://api.example.com

# .env.development
VITE_API_URL=https://dev-api.example.com

# .env.production
VITE_API_URL=https://prod-api.example.com

客户端访问：

只有以 VITE_ 开头的环境变量才能在客户端代码中访问：

javascript
// 在客户端代码中
console.log(import.meta.env.VITE_APP_TITLE)
console.log(import.meta.env.VITE_API_URL)

服务端访问：

在 vite.config.js 中可以访问所有环境变量：

javascript
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  
  return {
    define: {
      'import.meta.env.API_URL': JSON.stringify(env.VITE_API_URL)
    }
  }
})

内置环境变量：

Vite 提供了一些内置环境变量：

• import.meta.env.MODE：当前模式（development/production）
• import.meta.env.BASE_URL：部署的基础 URL
• import.meta.env.PROD：是否为生产环境
• import.meta.env.DEV：是否为开发环境
• import.meta.env.SSR：是否为服务端渲染

使用示例：

javascript
// 根据环境配置 API
const API_URL = import.meta.env.VITE_API_URL || 'https://api.example.com'

// 条件渲染
{import.meta.env.DEV && <DebugPanel />}

// 动态导入
const module = import.meta.env.PROD 
  ? await import('./prod-module')
  : await import('./dev-module')

TypeScript 类型定义：

typescript
// src/vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

最佳实践：

1. 敏感信息（如 API 密钥）不应放在 .env 文件中提交到版本控制
2. 使用 .env.example 提供环境变量模板
3. 为环境变量定义 TypeScript 类型
4. 使用 VITE_ 前缀区分客户端和服务端变量
5. 在 CI/CD 中通过环境变量注入配置