ReactJs项目免重新编译修改Web API EndPoints的实现方案问询

create-react-app默认提供的REACT_APP_*前缀环境变量属于编译时注入，修改后必须重新编译项目才能生效，无法满足多客户端部署无需重编的需求，最优方案是使用外置静态配置文件，具体实现步骤如下：

1. 新增外置配置文件 #

在项目public目录下新建config.js文件，public目录下的文件在打包时会被原样复制到构建产物目录，不会被编译处理：

// public/config.js
window.APP_CONFIG = {
  // 默认API端点，部署时可直接修改该值
  API_BASE_URL: "https://default-api.example.com/api",
  // 其他需要外置修改的配置项均可在此扩展
  OTHER_CONFIG: "default_value"
}

2. 全局引入配置文件 #

在public/index.html的head标签最顶部引入该配置文件，保证配置在业务代码加载前完成初始化：

<!-- public/index.html -->
<head>
  <script src="%PUBLIC_URL%/config.js"></script>
  <!-- 其他原有head标签内容保持不变 -->
</head>

3. 业务代码中调用配置 #

为了避免直接全局调用window对象，建议封装统一的配置读取工具，同时增加开发环境默认值兜底：

// src/utils/config.js
const getAppConfig = () => {
  // 优先读取外置配置，不存在时使用开发环境默认值
  return window.APP_CONFIG || {
    API_BASE_URL: "http://localhost:3001/dev-api"
  }
}

export default getAppConfig

在接口请求封装中使用配置：

// src/utils/request.js
import axios from "axios"
import getAppConfig from "./config"

const requestInstance = axios.create({
  baseURL: getAppConfig().API_BASE_URL,
  timeout: 10000
})

export default requestInstance

4. 部署使用方式 #

正常执行npm run build完成项目打包后，构建产物build目录下会存在对应的config.js文件。不同客户端部署时，直接修改该build/config.js文件中对应的API_BASE_URL值即可，无需重新编译项目。

注意：该方案仅适合存放非敏感的公开配置，密钥、鉴权凭证等敏感内容禁止放在该外置配置文件中，避免泄露。

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