如何在不同的构建环境中使用不同的API地址？
在不同构建环境中使用不同的API地址，是前端项目的常见需求。核心思路是通过环境变量区分环境，并在构建时动态注入对应的API地址。以下是通用实现方案，适用于大多数前端构建工具：
一、基础实现步骤
- 定义环境变量文件 为不同环境创建对应的配置文件（如开发、测试、生产），存放各自的API地址。
- 在代码中引用环境变量 在项目代码中通过特定语法访问环境变量，而非硬编码API地址。
- 配置构建命令
在
package.json中定义不同环境的构建命令，指定对应的环境模式。
二、主流构建工具的具体实现
1. Vite（推荐）
环境文件：创建.env系列文件
# .env.development（开发环境）
VITE_API_URL=/dev-api
# .env.test（测试环境）
VITE_API_URL=/test-api
# .env.production（生产环境）
VITE_API_URL=/prod-api代码中使用：
// api.js
export const apiBaseUrl = import.meta.env.VITE_API_URL;构建命令：
// package.json
"scripts": {
"dev": "vite", // 默认使用development环境
"build:test": "vite build --mode test",
"build:prod": "vite build --mode production"
}2. Webpack
环境文件：创建.env系列文件（需配合dotenv库）
# .env.test
API_URL=/test-api配置webpack：
// webpack.config.js
const Dotenv = require('dotenv-webpack');
const env = process.env.NODE_ENV || 'development';
module.exports = {
plugins: [
new Dotenv({
path: `.env.${env}` // 根据环境加载对应文件
})
],
// 注入环境变量到代码
plugins: [
new webpack.DefinePlugin({
'process.env.API_URL': JSON.stringify(process.env.API_URL)
})
]
};代码中使用：
const apiBaseUrl = process.env.API_URL;构建命令：
"scripts": {
"build:test": "cross-env NODE_ENV=test webpack build",
"build:prod": "cross-env NODE_ENV=production webpack build"
}3. Create React App (CRA)
环境文件：文件名需包含环境名，变量以REACT_APP_为前缀
# .env.test.local
REACT_APP_API_URL=/test-api
# .env.production
REACT_APP_API_URL=/prod-api代码中使用：
const apiBaseUrl = process.env.REACT_APP_API_URL;构建命令：
"scripts": {
"build:test": "REACT_APP_ENV=test react-scripts build",
"build:prod": "react-scripts build" // 默认生产环境
}4. Vue CLI
环境文件：变量以VUE_APP_为前缀
# .env.test
VUE_APP_API_URL=/test-api代码中使用：
const apiBaseUrl = process.env.VUE_APP_API_URL;构建命令：
"scripts": {
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build"
}三、关键注意事项
- 环境变量前缀：不同工具对暴露给前端的变量有前缀要求（如
VITE_、REACT_APP_），未加前缀的变量会被忽略。 - 构建时注入：环境变量在构建阶段被注入代码，而非运行时。若需运行时切换环境，需通过后端接口返回当前环境配置。
- 敏感信息处理：前端环境变量会被打包到代码中，不要存储密钥、Token等敏感信息。
- 优先级：通常本地
.env.local文件会覆盖默认配置，适合存放个人开发配置（需加入.gitignore）。
通过这种方式，只需执行不同的构建命令，就能自动切换项目使用的API地址，无需手动修改代码，极大提升了多环境部署的效率。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-09-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
