除了Webpack，还有哪些构建工具可以实现不同环境使用不同API地址？

除了 Webpack，目前主流的前端构建工具（如 Vite、Rollup、Parcel、Turbopack 等）均支持通过环境变量实现不同环境切换 API 地址，核心逻辑都是“构建时注入环境变量，代码中读取变量”，但具体配置细节各有差异。以下是 5 种常用工具的实现方案，覆盖不同项目场景（Vue/React/纯 JS 等）：

一、Vite（推荐：Vue/React 项目，开发体验优）

Vite 是目前最流行的构建工具之一，内置了环境变量处理能力，无需额外安装插件，配置极简。

1. 核心规则

• Vite 仅识别以 VITE_ 开头的环境变量（避免与系统变量冲突）。
• 环境配置文件需放在项目根目录，命名格式为 .env.[环境名]（如 .env.test）。

2. 实现步骤

（1）创建环境配置文件

# .env.development（开发环境，npm run dev 默认加载）
VITE_API_BASE_URL = 'http://dev-api.example.com'

# .env.test（测试环境）
VITE_API_BASE_URL = 'http://test-api.example.com'

# .env.production（生产环境，npm run build 默认加载）
VITE_API_BASE_URL = 'http://prod-api.example.com'

（2）在代码中使用

直接通过 import.meta.env.VITE_XXX 读取（Vite 自动注入，无需额外配置）：

// src/api/request.js
const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 直接使用环境变量
  timeout: 5000
});

（3）配置 package.json 命令

通过 --mode [环境名] 指定加载的配置文件：

{
  "scripts": {
    "dev": "vite", // 默认加载 .env.development
    "build:test": "vite build --mode test", // 加载 .env.test
    "build:prod": "vite build" // 默认加载 .env.production
  }
}

二、Rollup（推荐：类库/轻量项目，打包体积小）

Rollup 是专注于“模块打包”的工具，常用于构建 JavaScript 类库或轻量应用，需通过插件处理环境变量。

1. 安装依赖

npm install @rollup/plugin-replace --save-dev # 注入环境变量
npm install cross-env --save-dev # 跨平台设置 NODE_ENV

2. 实现步骤

（1）创建 Rollup 配置文件（rollup.config.js）

import replace from '@rollup/plugin-replace';

// 根据命令行的 NODE_ENV 确定环境
const env = process.env.NODE_ENV || 'development';

// 定义不同环境的 API 地址映射
const apiBaseUrlMap = {
  development: JSON.stringify('http://dev-api.example.com'),
  test: JSON.stringify('http://test-api.example.com'),
  production: JSON.stringify('http://prod-api.example.com')
};

export default {
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/bundle.js',
    format: 'esm' // 输出格式（根据需求选择：esm/cjs/iife）
  },
  plugins: [
    // 注入环境变量（替换代码中的 process.env.API_BASE_URL）
    replace({
      preventAssignment: true, // Rollup 3+ 必需，避免赋值冲突
      'process.env.API_BASE_URL': apiBaseUrlMap[env]
    })
  ]
};

（2）在代码中使用

// src/api.js
export const fetchData = () => {
  return fetch(`${process.env.API_BASE_URL}/data`);
};

（3）配置 package.json 命令

{
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development rollup -c",
    "build:test": "cross-env NODE_ENV=test rollup -c",
    "build:prod": "cross-env NODE_ENV=production rollup -c"
  }
}

三、Parcel（推荐：零配置项目，快速上手）

Parcel 主打“零配置”，无需手动写构建配置文件，环境变量处理也更简洁，适合快速开发小型项目。

1. 核心规则

• Parcel 识别以 PARCEL_ 开头的环境变量，或直接使用系统环境变量。
• 可通过 .env 文件定义环境变量（无需区分环境名，通过命令行切换）。

2. 实现步骤

（1）创建环境配置文件（可选，也可直接在命令行设置）

# .env（通用配置，可被命令行覆盖）
PARCEL_API_BASE_URL = 'http://dev-api.example.com'

（2）在代码中使用

直接通过 process.env.PARCEL_XXX 读取：

// src/App.js
console.log('API 地址：', process.env.PARCEL_API_BASE_URL);

（3）配置 package.json 命令

通过 cross-env 直接在命令行覆盖环境变量，无需额外配置文件：

{
  "scripts": {
    "dev": "parcel serve src/index.html", // 使用 .env 中的默认值
    "build:test": "cross-env PARCEL_API_BASE_URL=http://test-api.example.com parcel build src/index.html",
    "build:prod": "cross-env PARCEL_API_BASE_URL=http://prod-api.example.com parcel build src/index.html"
  }
}

四、Turbopack（新兴工具：Next.js 推荐，速度快）

Turbopack 是 Vercel 推出的新一代构建工具，兼容 Webpack 生态，主打“比 Webpack 快 700 倍”，常用于 Next.js 项目（Next.js 13+ 已默认支持）。

1. 核心规则

• 支持 .env 文件，识别以 NEXT_PUBLIC_ 开头的环境变量（前端可访问）。
• 若不使用 Next.js，需通过 @turbopack/plugin-env 插件处理。

2. 实现步骤（以 Next.js 项目为例）

（1）创建环境配置文件

# .env.development
NEXT_PUBLIC_API_BASE_URL = 'http://dev-api.example.com'

# .env.test
NEXT_PUBLIC_API_BASE_URL = 'http://test-api.example.com'

# .env.production
NEXT_PUBLIC_API_BASE_URL = 'http://prod-api.example.com'

（2）在代码中使用

// pages/index.js
export default function Home() {
  return (
    <div>
      <p>API 地址：{process.env.NEXT_PUBLIC_API_BASE_URL}</p>
    </div>
  );
}

（3）配置 package.json 命令

Next.js 会根据 NODE_ENV 自动加载对应 .env 文件：

{
  "scripts": {
    "dev": "next dev", // NODE_ENV=development，加载 .env.development
    "build:test": "cross-env NODE_ENV=test next build", // 加载 .env.test
    "build:prod": "next build" // NODE_ENV=production，加载 .env.production
  }
}

五、Create React App（CRA，推荐：React 新手项目）

CRA 是 React 官方脚手架，内置了 Webpack 配置（无需手动修改），环境变量处理有固定规则，适合 React 入门项目。

1. 核心规则

• 仅识别以 REACT_APP_ 开头的环境变量（避免与 CRA 内部变量冲突）。
• 支持 .env.[环境名] 文件，默认加载 .env.development（开发）和 .env.production（构建）。

2. 实现步骤

（1）创建环境配置文件

# .env.development
REACT_APP_API_BASE_URL = 'http://dev-api.example.com'

# .env.test
REACT_APP_API_BASE_URL = 'http://test-api.example.com'

# .env.production
REACT_APP_API_BASE_URL = 'http://prod-api.example.com'

（2）在代码中使用

直接通过 process.env.REACT_APP_XXX 读取：

// src/App.js
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL
});

（3）配置 package.json 命令

通过 REACT_APP_ENV 或 NODE_ENV 切换环境（CRA 会自动加载对应文件）：

{
  "scripts": {
    "start": "react-scripts start", // 加载 .env.development
    "build:test": "cross-env REACT_APP_ENV=test react-scripts build", // 加载 .env.test
    "build:prod": "react-scripts build" // 加载 .env.production
  }
}

六、各工具核心差异对比

七、通用注意事项

1. 变量注入时机：所有工具均在构建阶段将环境变量硬编码到打包文件中，而非运行时动态获取（运行时需通过接口请求配置）。
2. 安全性：前端环境变量会暴露在打包后的 JS 中，严禁存放密钥、Token、数据库密码等敏感信息（敏感配置需放在后端接口中）。
3. 本地配置：可创建 .env.local 文件存放个人本地配置（需加入 .gitignore，避免提交到代码仓库，覆盖团队共享配置）。