react如何打包后配置文件

在React项目中打包后修改配置文件

React项目打包后通常生成静态文件，配置文件的动态修改需要特殊处理。以下是几种常见方法：

使用环境变量

创建.env文件定义环境变量，变量名必须以REACT_APP_开头：

REACT_APP_API_URL=https://api.example.com

代码中通过process.env.REACT_APP_API_URL访问。打包后可通过修改服务器环境变量或使用Docker等容器技术动态注入。

外部配置文件

在public文件夹创建config.json：

{
  "apiUrl": "https://api.example.com"
}

通过fetch或axios动态加载：

fetch(`${process.env.PUBLIC_URL}/config.json`)
  .then(response => response.json())
  .then(config => {
    // 使用配置
  });

使用全局变量

在public/index.html中定义全局变量：

<script>
  window._env_ = {
    API_URL: 'https://api.example.com'
  };
</script>

代码中通过window._env_.API_URL访问。

后端接口获取配置

创建API端点返回配置信息：

// 前端代码
axios.get('/api/config')
  .then(response => {
    const config = response.data;
    // 使用配置
  });

使用Docker环境变量

创建可替换的配置文件模板，在容器启动时通过envsubst替换：

COPY config.template.js /app/config.js
RUN envsubst < /app/config.template.js > /app/config.js

动态导入配置

使用import()动态导入配置模块：

const config = await import('./config.' + process.env.NODE_ENV);

每种方法适用于不同场景，环境变量适合简单配置，外部配置文件适合需要频繁修改的情况，后端接口适合需要权限控制的配置。