在React項目中如何配置環(huán)境變量以區(qū)分開發(fā)、測試和生產(chǎn)環(huán)境

在React項目中，可以通過創(chuàng)建不同的環(huán)境變量文件來區(qū)分開發(fā)、測試和生產(chǎn)環(huán)境。以下是一種常見的做法：

1. 創(chuàng)建不同的環(huán)境變量文件： 在項目根目錄下創(chuàng)建三個環(huán)境變量文件：.env.development（開發(fā)環(huán)境）、.env.test（測試環(huán)境）和.env.production（生產(chǎn)環(huán)境）。

2. 配置環(huán)境變量： 在每個環(huán)境變量文件中設(shè)置對應(yīng)環(huán)境的變量，例如：

// .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. 使用環(huán)境變量： 在React組件中可以通過process.env.REACT_APP_API_URL來獲取對應(yīng)環(huán)境的API URL，例如：

const apiUrl = process.env.REACT_APP_API_URL;

4. 配置打包命令： 在package.json中配置打包命令，并在打包命令中指定使用的環(huán)境變量文件。例如：

"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模塊可以跨平臺設(shè)置環(huán)境變量。然后通過運行相應(yīng)的打包命令來構(gòu)建對應(yīng)環(huán)境的應(yīng)用程序。

通過以上步驟，就可以在React項目中輕松地配置不同環(huán)境的環(huán)境變量，以區(qū)分開發(fā)、測試和生產(chǎn)環(huán)境。