除了 Vite，还有哪些构建工具支持在构建时根据环境变量设置不同的 API 地址？
除了 Vite，还有哪些构建工具支持在构建时根据环境变量设置不同的 API 地址？
小焱
发布于 2025-11-12 15:43:14
发布于 2025-11-12 15:43:14
除了 Vite 之外，还有许多主流的前端构建工具都支持在构建时根据环境变量设置不同的 API 地址，以下是一些常见的工具及其实现方式：
Webpack
Webpack 可以通过 DefinePlugin 插件将环境变量注入到代码中，配合 cross-env 传递环境参数：
// webpack.config.js
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env.API_URL': JSON.stringify(
process.env.NODE_ENV === 'production'
? '/prod-api'
: '/dev-api'
)
})
]
};构建命令：cross-env NODE_ENV=production webpack build
Rollup
Rollup 可通过 @rollup/plugin-replace 插件实现环境变量替换：
// rollup.config.js
import replace from '@rollup/plugin-replace';
export default {
plugins: [
replace({
'process.env.API_URL': JSON.stringify(
process.env.NODE_ENV === 'test' ? '/test-api' : '/api'
),
preventAssignment: true
})
]
};Create React App（CRA）
CRA 内置了环境变量处理，无需额外配置，只需创建 .env 文件：
# .env.production
REACT_APP_API_URL=/prod-api
# .env.development
REACT_APP_API_URL=/dev-api代码中直接使用：const apiUrl = process.env.REACT_APP_API_URL;
Vue CLI
类似 CRA，支持 .env 文件系列，变量需以 VUE_APP_ 为前缀：
# .env.test
VUE_APP_API_URL=/test-api代码中使用：const apiUrl = process.env.VUE_APP_API_URL;
Parcel
Parcel 支持直接读取 .env 文件，无需配置即可使用环境变量：
# .env
API_URL=/dev-api
# .env.production
API_URL=/prod-api代码中使用：const apiUrl = process.env.API_URL;
这些工具的核心原理都是在构建过程中根据环境变量动态替换代码中的占位符，从而实现不同环境下使用不同 API 地址的需求。具体实现时需注意各工具对环境变量的命名规范（如前缀要求）和注入方式的差异。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-11-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
