Vite环境变量配置与多环境管理实战

1. Vite环境变量基础解析

在Vite项目中，环境变量是配置不同运行环境的核心机制。与传统的Webpack配置不同，Vite采用了更现代的import.meta.env方案来处理环境变量。这个设计源于ES模块的原生支持，使得环境变量的使用更加直观和高效。

1.1 内置环境变量详解

Vite默认提供了四个基础环境变量，这些变量在项目启动时会被自动注入：

javascript复制{
  MODE: 'development',  // 当前运行模式
  BASE_URL: '/',        // 部署基础路径
  PROD: false,          // 是否生产环境
  DEV: true             // 是否开发环境
}

MODE变量特别值得关注，它决定了Vite会加载哪个环境配置文件。默认情况下，运行vite dev时MODE值为development，运行vite build时则为production。但我们可以通过命令行参数覆盖这个默认行为：

bash复制vite --mode staging  # 将MODE设置为staging

1.2 环境变量的加载机制

Vite的环境变量系统遵循特定的加载优先级规则：

1. .env.[mode].local - 最高优先级，本地覆盖文件
2. .env.[mode] - 指定模式的配置文件
3. .env.local - 所有模式的本地覆盖
4. .env - 通用环境变量

重要提示：所有.local文件应该加入.gitignore，因为它们通常包含敏感信息。

2. 自定义环境变量实战

2.1 命名规范与使用限制

Vite对自定义环境变量有严格的命名要求：只有以VITE_开头的变量才会被暴露给客户端代码。这是出于安全考虑的设计，避免意外泄露敏感信息。

env复制# 正确的命名方式
VITE_API_URL=https://api.example.com
VITE_DEBUG=true

# 这些变量不会被客户端访问到
DB_PASSWORD=secret
API_KEY=123456

2.2 多环境配置实践

实际项目中，我们通常需要配置多个环境。假设我们有开发、测试和生产三个环境，可以这样组织文件：

code复制.env                # 通用配置
.env.development    # 开发环境专用
.env.test           # 测试环境专用
.env.production     # 生产环境专用

在package.json中配置对应的启动命令：

json复制{
  "scripts": {
    "dev": "vite",
    "test": "vite --mode test",
    "build": "vite build",
    "preview": "vite previ