React多分支多环境下环境变量管理的最优方案是什么

这个方案可以同时规避你提到的两个现有方案的缺陷，也能彻底解决跨分支合并代码的配置冲突问题，具体实现如下：

核心思路 #

所有环境的配置文件全部归集到主干分支统一维护，不拆分到不同环境分支，通过启动/构建命令指定加载对应环境的配置文件，从根源上避免配置代码冲突。

具体实现步骤 #

1. 新增多环境配置文件
   在项目根目录创建3个环境配置文件，全部提交到主干分支（如main/master），不需要拆分到不同的环境分支：

• .env.development 开发环境配置：

REACT_APP_API_URL = https://our-website-development.com/api
# 可补充其他开发环境专属配置

• .env.qa 测试环境配置：

REACT_APP_API_URL = https://our-website-qa.com/api

• .env.staging 预发环境配置：

REACT_APP_API_URL = https://our-website-staging.com/api

2. 安装环境文件加载工具（可选，兼容性更强）
   为了避免不同系统的环境变量兼容性问题，安装env-cmd作为开发依赖：
   npm install env-cmd -D

3. 修改package.json脚本
   在scripts字段中添加对应环境的启动、构建命令，直接绑定对应配置文件：

{
  "scripts": {
    "start:dev": "env-cmd -f .env.development react-scripts start",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "start:staging": "env-cmd -f .env.staging react-scripts start",
    "build:dev": "env-cmd -f .env.development react-scripts build",
    "build:qa": "env-cmd -f .env.qa react-scripts build",
    "build:staging": "env-cmd -f .env.staging react-scripts build"
  }
}

注：如果使用Vite创建的项目，只需要把配置变量前缀改成VITE_，命令调整为对应Vite的启动构建命令即可，逻辑完全一致。

4. 统一API_URL代码
   所有分支的API配置都统一为以下代码，不需要再针对不同环境修改：

const API_URL = process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '/api';

额外优化配置 #

在.gitignore中添加.env.local文件，该文件优先级高于其他.env配置，不上传代码仓库，供开发人员本地自定义特殊配置使用，不会影响团队统一配置。

方案优势 #

• 彻底解决跨分支合并的配置冲突问题：所有环境配置都在主干分支统一维护，三个环境分支只需要同步主干代码即可，不会出现配置差异导致的冲突
• 无需本地手动修改配置：本地开发需要切换不同环境的接口时，直接执行对应启动命令即可，比如要对接qa环境接口只需要跑npm run start:qa，不需要修改任何代码
• 适配CI/CD部署流程：不同环境的部署任务直接执行对应构建命令即可，不需要额外在服务器配置环境变量，打包产物自动携带对应环境的配置

内容的提问来源于stack exchange，提问作者nick