react如何配置正式地址

配置正式地址的方法

在React项目中配置正式地址通常涉及环境变量的设置、API基础URL的配置以及构建时的参数调整。以下是具体实现方法：

环境变量配置

创建.env.production文件，定义生产环境变量：

REACT_APP_API_BASE_URL=https://api.example.com
REACT_APP_ENV=production

代码中调用环境变量

在组件或服务文件中使用环境变量：

const apiUrl = process.env.REACT_APP_API_BASE_URL;

构建时指定环境

运行构建命令时自动使用生产环境配置：

npm run build

动态配置方案

对于需要运行时动态配置的场景，可在public文件夹创建config.json：

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

通过fetch在应用初始化时加载配置：

fetch('/config.json')
  .then(response => response.json())
  .then(config => {
    window.appConfig = config;
  });

代理配置（开发环境）

在package.json中配置代理，避免开发时跨域问题：

"proxy": "https://api.example.com"

Docker部署配置

通过环境变量覆盖默认配置：

ENV REACT_APP_API_BASE_URL=https://api.example.com

注意事项

• 所有REACT_APP_开头的变量会被Create React App内置的webpack配置注入
• 生产环境变量需重新构建才能生效
• 敏感信息应通过后端服务获取，避免前端硬编码
• 不同部署环境（如staging/production）建议使用不同的环境文件