如何在 React 应用程序中处理多个环境

Question

我正在开发一个小项目，包括 React 前端和 Java 后端，有两个环境。

我不知道如何在多个环境下工作，我使用 axios 声明 API url：

export default axios.create({
  baseURL: `http://api.dev.project.local/api/v1`,
});

但这仅适用于一种环境，如何在包构建后更改API url？我认为创建两个构建（一个用于开发，一个用于产品）不是一个好的做法，因为它可能会在工件管理器中造成混乱（我们使用 Azure Artifacs Feed）。

你怎么解决这个问题？

Answer 1

如果您使用create-react-app，并且只需要本地和生产环境，请使用添加自定义环境变量内置功能。否则，一个有用的替代方案是env-cmd。

安装 env-cmd 作为开发依赖项：

npm i -D env-cmd

添加.env文件（在项目根目录下，所有环境都相同）：

REACT_APP_API_ENDPOINT = https://default.example.com

添加.env.qa文件：

REACT_APP_API_ENDPOINT = https://qa.example.com

添加.env.staging文件：

REACT_APP_API_ENDPOINT = https://stage.example.com

添加.env.生产文件：

REACT_APP_API_ENDPOINT = https://production.example.com

更新package.json

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:staging": "env-cmd -f .env.staging npm run-script build",
  }
}

请注意，默认的start和build create-react-app 命令分别使用.env和.env.Production，并且不需要env-cmd。

可以在我们的代码中使用

const baseUrl = process.env.REACT_APP_API_BASE_URL;

并且，我们还可以在开发环境中使用env-cmd作为启动命令。