CRA Typescript项目如何读取支持部署后修改的配置文件

1. 新增配置类型定义 #

在src目录下新建types/config.d.ts类型声明文件，扩展全局Window对象的类型，解决TS类型识别报错问题：

// src/types/config.d.ts
export interface IAppConfig {
  apiUrl: string;
  externalUrl: string;
  // 后续新增配置项直接在这里补充类型即可
}

declare global {
  interface Window {
    Config: IAppConfig;
  }
}

export {};

2. 新增public目录下的可修改配置文件 #

在public文件夹下新建config.js，配置内容直接挂载到window对象：

// public/config.js
window.Config = {
  apiUrl: "https://localhost:3001/",
  externalUrl: "https://localhost:3002/"
}

该文件不会被webpack打包进构建产物，部署时直接修改这个文件的配置值即可生效，无需重新构建应用，完全符合「一次构建、随处部署」的要求。

3. 入口HTML提前引入配置文件 #

修改public/index.html，在打包产物引入之前加载config.js，确保应用初始化时配置已经挂载完成：

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

4. 封装全局配置导出（可选但推荐） #

新建src/utils/config.ts文件，统一导出配置，避免业务代码重复写window.Config：

// src/utils/config.ts
const config = window.Config;
export default config;

5. 多环境配置适配 #

开发/生产环境差异化配置 #

可以在public目录下分别存放不同环境的配置模板，比如config.dev.js、config.prod.js，在package.json中配置脚本在启动/构建时自动替换为对应环境的配置：

// package.json
"scripts": {
  "start": "cp public/config.dev.js public/config.js && react-scripts start",
  "build": "cp public/config.prod.js public/config.js && react-scripts build",
}

部署时修改配置 #

直接修改构建产物根目录下的config.js文件即可生效，无需重新构建。

使用示例 #

无论在组件还是非组件的工具文件中，都可以直接导入使用，自带TS类型提示，属性拼写错误会直接触发TS校验报错：

// 非组件的请求封装示例 src/utils/request.ts
import axios from "axios";
import config from "./config";

const request = axios.create({
  baseURL: config.apiUrl,
});

export default request;

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