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