除了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}
}
六、各工具核心差异对比
| 构建工具 | 环境变量前缀 | 配置文件格式 | 核心依赖/插件 | 适用场景 |
|---|---|---|---|---|
| Vite | VITE_ | .env.[mode] | 内置（无需插件） | Vue/React 项目、开发体验优先 |
| Rollup | 自定义（无强制） | 代码中映射或 .env | @rollup/plugin-replace | 类库开发、轻量应用 |
| Parcel | PARCEL_（可选） | .env 或命令行 | 内置（无需插件） | 零配置项目、快速原型 |
| Turbopack | NEXT_PUBLIC_（Next.js） | .env.[mode] | @turbopack/plugin-env | Next.js 项目、追求速度 |
| Create React App | REACT_APP_ | .env.[mode] | 内置（CRA 封装） | React 新手项目、无需配置 |
七、通用注意事项
- 变量注入时机：所有工具均在构建阶段将环境变量硬编码到打包文件中，而非运行时动态获取（运行时需通过接口请求配置）。
- 安全性：前端环境变量会暴露在打包后的 JS 中，严禁存放密钥、Token、数据库密码等敏感信息（敏感配置需放在后端接口中）。
- 本地配置：可创建
.env.local文件存放个人本地配置（需加入.gitignore，避免提交到代码仓库，覆盖团队共享配置）。