如何在React应用中实现多环境Base URL等常量配置？

嘿，这个问题我太有共鸣了！从PHP转到React开发的时候，我也纠结过怎么复刻那种“每个环境单独存配置文件”的模式——毕竟SPA是前端打包的，没法像PHP那样运行时读取服务器上的配置文件。不过经过几个项目的摸索，总结了几个靠谱的方案，分享给你：

1. 使用Create React App（CRA）自带的环境变量文件（最常用） #

如果你用的是CRA初始化的项目，官方已经提供了多环境配置的方案，非常省心：

• 在项目根目录创建不同环境的.env文件：
  • .env.development：开发环境配置
  • .env.production：生产环境配置
  • .env.test：测试环境配置
• 注意：所有自定义环境变量必须以REACT_APP_开头，CRA才会把它注入到构建产物中。比如：

  # .env.development
  REACT_APP_API_BASE_URL=http://localhost:3001/api
  REACT_APP_IMAGE_BASE_URL=http://localhost:3001/images
  

  # .env.production
  REACT_APP_API_BASE_URL=https://prod-api.yourdomain.com/api
  REACT_APP_IMAGE_BASE_URL=https://cdn.yourdomain.com/images
  

• 在代码中直接通过process.env访问：

  // 比如在API请求工具类里
  const apiClient = axios.create({
    baseURL: process.env.REACT_APP_API_BASE_URL,
  });
  

• 小提示：
  • 修改.env文件后需要重启开发服务器才能生效
  • 把.env（如果有）和.env.local加入.gitignore，避免把本地配置提交到仓库
  • 前端环境变量会被打包进静态文件，绝对不能放敏感信息（比如API密钥）

2. 自定义配置文件 + 构建脚本（适合非CRA或需要灵活配置的场景） #

如果你的项目是自己搭的Webpack/Vite环境，或者需要更复杂的配置结构（比如对象、数组），可以用这种方式：

• 在src目录下创建config文件夹，里面放不同环境的配置文件：

  // src/config/config.dev.js
  export default {
    apiBaseUrl: 'http://localhost:3001/api',
    imageBaseUrl: 'http://localhost:3001/images',
    // 还可以加其他配置，比如超时时间、功能开关
    requestTimeout: 10000,
    enableFeatureX: true,
  };
  

  // src/config/config.prod.js
  export default {
    apiBaseUrl: 'https://prod-api.yourdomain.com/api',
    imageBaseUrl: 'https://cdn.yourdomain.com/images',
    requestTimeout: 15000,
    enableFeatureX: false,
  };
  

• 在package.json的scripts里添加构建命令，通过复制文件来切换配置：

  "scripts": {
    "start:dev": "cp src/config/config.dev.js src/config/config.js && webpack serve --mode development",
    "build:prod": "cp src/config/config.prod.js src/config/config.js && webpack --mode production"
  }
  

  （Windows环境把cp换成copy就行）
• 在代码中导入统一的config.js：

  import config from './config/config';
  
  console.log(config.apiBaseUrl);
  

3. 运行时注入配置（适合无需重新构建即可修改配置的场景） #

如果你的项目需要部署到多个环境，但不想每次都重新构建（比如运维需要直接修改配置），可以用这种运行时读取的方式：

• 在public文件夹下创建一个config.json文件（因为public文件夹里的文件不会被打包，会直接复制到构建产物中）：

  {
    "apiBaseUrl": "https://api.yourdomain.com",
    "imageBaseUrl": "https://cdn.yourdomain.com/images"
  }
  

• 在应用初始化的时候加载这个配置文件：

  // App.jsx
  import { useState, useEffect } from 'react';
  
  function App() {
    const [config, setConfig] = useState({});
  
    useEffect(() => {
      fetch('/config.json')
        .then(res => res.json())
        .then(data => setConfig(data))
        .catch(err => console.error('加载配置失败:', err));
    }, []);
  
    // 注意：配置加载完成前可以显示加载状态
    if (!Object.keys(config).length) {
      return <div>加载中...</div>;
    }
  
    return (
      <div>
        API地址: {config.apiBaseUrl}
      </div>
    );
  }
  
  export default App;
  

• 这种方式的好处是：部署时只需要替换config.json文件，不用重新构建项目，非常适合CI/CD流程或者多环境快速部署。

一些关键提醒 #

• 前端配置是完全暴露给用户的，任何敏感信息都不能放在前端配置里，比如API密钥、数据库密码等，这些必须留在后端处理。
• 如果用TypeScript，可以定义一个Config类型来约束配置结构，避免拼写错误：

  interface Config {
    apiBaseUrl: string;
    imageBaseUrl: string;
    requestTimeout?: number;
  }
  
  const config: Config = require('./config/config').default;
  

内容的提问来源于stack exchange，提问作者i.brod