React中如何读取config.js配置在index.html设置base href？

1. 确保config.js暴露全局环境变量 #

你的config.js（以及部署时被替换的config.dev.js/config.prod.js）需要将环境变量挂载到全局window对象上，让index.html能直接访问：

// config.dev.js 示例
window.APP_CONFIG = {
  REACT_APP_BASENAME: "/dev-myapp"
};

// config.prod.js 示例
window.APP_CONFIG = {
  REACT_APP_BASENAME: "/prod-myapp"
};

CD流程替换config.js时，会自动写入对应环境的配置，确保window.APP_CONFIG包含正确的REACT_APP_BASENAME值。

2. 在index.html中动态设置base标签 #

在index.html的<head>里，先加载config.js，再通过脚本修改<base>的href属性：

<head>
  <!-- 先加载config.js，保证全局变量已初始化 -->
  <script src="%PUBLIC_URL%/config.js"></script>
  
  <!-- 给base标签加id，方便脚本定位 -->
  <base id="app-base" href="" />

  <script>
    const baseEl = document.getElementById('app-base');
    // 读取全局变量并设置base href
    if (window.APP_CONFIG?.REACT_APP_BASENAME) {
      baseEl.href = window.APP_CONFIG.REACT_APP_BASENAME;
    }
  </script>

  <!-- 其他head内容（如标题、样式表）放在后面 -->
</head>

关键注意点 #

• 加载顺序：必须先引入config.js再执行修改脚本，否则全局变量未定义会导致设置失败。
• 默认值兼容：如果需要处理未配置的场景，可以给<base>设置默认href（比如"/"），避免页面路径异常。

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