ReactJS如何生成单一部署包适配多环境？

当然可行，核心思路是把环境变量从构建时注入改为运行时加载，这样就能用同一个构建包适配所有环境，实现「黄金制品」的需求。具体步骤如下：

1. 移除构建时的多环境注入配置 #

删掉package.json里的多环境构建脚本，只保留基础构建命令：

"scripts": {    
  "build": "react-scripts build"
}

不再需要env-cmd和各类.env文件，因为环境变量将不再在构建阶段嵌入包内。

2. 准备运行时环境配置文件 #

在项目的public目录下创建分环境的配置文件（构建后会被完整复制到build目录，不会被webpack编译）：
比如创建env-config.dev.js、env-config.qa.js、env-config.sbx.js、env-config.prod.js，每个文件格式如下：

// public/env-config.prod.js
window.env = {
  API_URL: "https://prod-api.example.com",
  APP_ENV: "production",
  // 其他环境专属变量
};

3. 部署时绑定对应环境的配置 #

通过部署脚本或web服务器配置，让目标环境自动加载对应配置文件：

• Shell部署脚本示例（部署到prod环境）：

  # 将prod配置重命名为通用文件名，确保应用能统一加载
  cp build/env-config.prod.js build/env-config.js
  # 部署build文件夹到目标服务器
  rsync -av build/ user@prod-server:/var/www/app/
  

• Nginx配置示例（根据域名自动匹配环境）：

  map $host $env_config {
    dev.example.com env-config.dev.js;
    qa.example.com env-config.qa.js;
    sbx.example.com env-config.sbx.js;
    example.com env-config.prod.js;
  }
  
  server {
    location / {
      try_files $uri $uri/ /index.html;
    }
  
    location /env-config.js {
      alias /var/www/app/$env_config;
    }
  }
  

4. 在React应用中加载运行时变量 #

在项目入口文件（如src/index.js）最顶部添加加载逻辑，确保环境变量在React初始化前加载完成：

// src/index.js
const script = document.createElement('script');
script.src = '/env-config.js';
script.async = false;
script.onload = () => {
  // 环境变量加载完成后初始化应用
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
};
document.head.appendChild(script);

在应用内使用变量时，直接访问window.env即可：

// 示例：调用环境专属API
fetch(`${window.env.API_URL}/data`)
  .then(res => res.json())
  .then(data => console.log(data));

5. 验证方案 #

• 执行一次npm run build生成单一构建包
• 将该包分别部署到dev、qa、sbx、prod环境，通过部署脚本或服务器配置绑定对应环境的配置文件
• 访问各环境应用，检查是否正确加载了对应环境的变量

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