基于环境（开发/产品）REACT 处理 .env api url 的最佳方法是什么？

Question

这里是我根据当前环境设置不同API URL的方式：

开发和生产，在 npm 上，命令设置环境。

是否有一些更优雅的解决方案，因为我的网址很长：

包.json

"scripts": {
    "start": "REACT_APP_BASE_URL=http://test-dev-1323211.us-east-1.elb.amazonaws.com/api/3.0 react-scripts start",
    "build": "REACT_APP_BASE_URL=http://test-1323211.us-east-1.elb.amazonaws.com/api/3.0 react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install",
 
  },

Answer 1

您可以通过 dotenv 库使用 .env 文件。 见：https://create-react-app.dev/docs/adding-custom-environment-variables

编辑：

来自文档

在 .env 中添加开发环境变量

要定义永久环境变量，请在项目的根目录中创建一个名为 .env 的文件：

REACT_APP_NOT_SECRET_CODE=abcdef

注意：您必须创建以 REACT_APP_ 开头的自定义环境变量。除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免在机器上意外暴露可能具有相同名称的私钥。更改任何环境变量都需要您重新启动正在运行的开发服务器。

---

您可以在 CRA 文档或 DotEnv 文档中阅读更多内容。

解决方案

基本上你可以使用 .env 和 .env.development.local 来分隔 URL。

.env:

REACT_APP_BASE_URL=http://test-1323211.us-east-1.elb.amazonaws.com/api/3.0

.env.development.local：

REACT_APP_BASE_URL=http://test-dev-1323211.us-east-1.elb.amazonaws.com/api/3.0