React 中的配置文件

Question

我试图弄清楚如何使用不同的配置文件运行反应应用程序（通过create-react-app 创建）。

也就是说，假设我有多个环境（本地、开发、生产）并且我有一个指向后端（部署在另一台服务器上）的提取。

后端对每个环境都有自己的地址。我需要以某种方式为不同的发布设置全局变量。

例如，在 Springboot 中，这可以通过 application-"profile".properties 完成。

我通过 npm install -g serve & serve -s build 运行应用程序。怎么做？

Answer 1

使用create-react-app 时，您可以使用环境变量配置您的应用程序。

此处的文档中有详细说明：https : //facebook.github.io/create-react-app/docs/adding-custom-environment-variables

所有环境变量都需要以REACT_APP_.

您可以使用.env文件定义具有不同环境变量的配置文件。

例如，要在生产中设置 API URL，请创建一个包含以下内容的文件.env.production：

REACT_APP_API_URL=https://my.beautiful.api/

...默认情况下（用于本地开发），创建一个文件.env：

REACT_APP_API_URL=http://localhost:3001/

• .env.production文件中的环境变量将在您构建项目时使用npm run build
• 当您在本地开发模式下使用.env文件处理项目时，将使用.env文件中的环境变量npm start

在应用程序代码中使用环境变量的示例：

fetch(process.env.REACT_APP_API_URL)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
});