React构建后配置JSON文件缺失，如何实现多环境部署更新配置？

问题原因 #

你通过import data from './config.json'导入配置时，React的构建工具（如webpack）会将JSON内容直接编译进最终的JS bundle文件中，不会保留独立的config.json文件，所以构建后找不到该文件，也无法单独修改。

解决方案 #

方法1：将配置文件放在public目录，动态加载（推荐） #

public目录下的文件会原封不动复制到构建后的输出目录，不会被打包进bundle，是最简便的实现方式：

• 把config.json移动到项目根目录的public文件夹中。
• 在组件中通过fetch动态加载配置：

  import { useState, useEffect } from 'react';
  
  function App() {
    const [config, setConfig] = useState(null);
  
    useEffect(() => {
      fetch('/config.json')
        .then(res => res.json())
        .then(data => setConfig(data))
        .catch(err => console.error('加载配置失败:', err));
    }, []);
  
    if (!config) return <div>加载中...</div>;
  
    return <div>API地址: {config.apiUrl}</div>;
  }
  
  export default App;
  

• 构建完成后，你会在build目录下找到独立的config.json文件，直接修改即可适配不同环境，无需重新构建。

方法2：使用环境变量（适合固定环境配置） #

如果配置项与环境强绑定（如API地址、开关状态），可以用React自带的环境变量机制：

• 在项目根目录创建对应环境的配置文件，比如.env.development（开发环境）、.env.production（生产环境）：

  # .env.production
  REACT_APP_API_URL=https://prod-api.example.com
  REACT_APP_FEATURE_FLAG=false
  

  注意：变量必须以REACT_APP_开头，否则不会被构建工具识别。
• 在代码中直接使用这些变量：

  const apiUrl = process.env.REACT_APP_API_URL;
  const isFeatureEnabled = process.env.REACT_APP_FEATURE_FLAG === 'true';
  

• 构建时，对应环境的变量会被替换进bundle。比如执行npm run build会自动加载.env.production的配置，修改对应.env文件后重新构建即可切换环境。

方法3：自定义webpack配置（进阶） #

如果不想用fetch，又要保留独立配置文件，可以修改webpack配置，将config.json复制到构建目录，再通过动态方式加载：

• 以craco为例（无需eject官方脚手架）：
  1. 安装craco：npm install @craco/craco --save-dev
  2. 创建craco.config.js，添加复制文件的配置：

     const CopyWebpackPlugin = require('copy-webpack-plugin');
     
     module.exports = {
       webpack: {
         plugins: {
           add: [
             new CopyWebpackPlugin({
               patterns: [
                 { from: './src/config.json', to: './config.json' }
               ]
             })
           ]
         }
       }
     };
     

  3. 修改package.json的脚本，替换为craco命令：

     "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
     }
     

  4. 在代码中用require动态加载（避免import被打包）：

     const config = require('../config.json');
     

• 构建后，build目录下会生成独立的config.json，可直接修改。

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