Create React App 如何根据运行环境自动配置对应API调用地址？

完全可以实现，React项目通常依赖脚手架的环境变量能力识别当前运行环境，自动匹配对应API地址，不需要手动修改代码。

不同脚手架的配置方式 #

1. Create React App（CRA）项目 #

CRA 内置环境变量识别能力，默认对应三类环境：

• development：本地开发（执行npm start时自动启用）
• test：测试环境（执行npm test时自动启用）
• production：生产环境（执行npm run build时自动启用）

操作步骤：

• 在项目根目录新建3个环境配置文件：.env.development、.env.test、.env.production
• 每个文件中定义API基础地址，注意CRA要求自定义环境变量必须以REACT_APP_为前缀：

  # .env.development 内容
  REACT_APP_API_BASE_URL=http://www.xxxx.dev
  

  # .env.test 内容
  REACT_APP_API_BASE_URL=http://www.xxxx.test
  

  # .env.production 内容
  REACT_APP_API_BASE_URL=http://www.xxxx.prod
  

• 代码中直接读取变量即可，会自动匹配当前环境的取值：

  fetch(`${process.env.REACT_APP_API_BASE_URL}/接口路径`)
  

2. Vite 搭建的React项目 #

Vite 逻辑和CRA类似，区别是自定义环境变量前缀要求为VITE_，读取变量的语法不同：

• 对应环境配置文件中写入：

  VITE_API_BASE_URL=http://www.xxxx.dev
  

• 代码中调用方式：

  fetch(`${import.meta.env.VITE_API_BASE_URL}/接口路径`)
  

3. 自定义Webpack搭建的项目 #

在webpack配置中使用DefinePlugin注入对应环境的变量即可，注入后代码读取逻辑和CRA项目一致。

最佳实践 #

建议将API基础地址统一封装到请求工具的全局配置中，避免每次请求重复拼接：

// 以axios为例
import axios from 'axios'

const request = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL // Vite项目替换为import.meta.env.VITE_API_BASE_URL
})

// 后续直接调用，自动拼接对应环境的基础地址
request.get('/user/info')

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