在React项目中如何配置环境变量以区分开发、测试和生产环境

在React项目中，可以通过创建不同的环境变量文件来区分开发、测试和生产环境。以下是一种常见的做法：

1. 创建不同的环境变量文件： 在项目根目录下创建三个环境变量文件：.env.development（开发环境）、.env.test（测试环境）和.env.production（生产环境）。

2. 配置环境变量： 在每个环境变量文件中设置对应环境的变量，例如：

// .env.development
REACT_APP_API_URL=http://localhost:3000/api

// .env.test
REACT_APP_API_URL=http://testapi.example.com/api

// .env.production
REACT_APP_API_URL=http://api.example.com/api

3. 使用环境变量： 在React组件中可以通过process.env.REACT_APP_API_URL来获取对应环境的API URL，例如：

const apiUrl = process.env.REACT_APP_API_URL;

4. 配置打包命令： 在package.json中配置打包命令，并在打包命令中指定使用的环境变量文件。例如：

"scripts": {
  "build:dev": "react-scripts build",
  "build:test": "cross-env NODE_ENV=test react-scripts build",
  "build:prod": "cross-env NODE_ENV=production react-scripts build"
}

使用cross-env模块可以跨平台设置环境变量。然后通过运行相应的打包命令来构建对应环境的应用程序。

通过以上步骤，就可以在React项目中轻松地配置不同环境的环境变量，以区分开发、测试和生产环境。