React中的配置文件

Question

我试图找出如何使用不同的配置文件运行一个react应用程序（通过create-react-app创建）。

也就是说，假设我有几个环境(local、dev、prod)，并且我有一个引用后端（部署在另一台服务器上）的fetch。

每个环境的后端都有自己的地址。我需要为不同的发射设置全局变量。

例如，在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_作为前缀。

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

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

…作为默认（本地开发），创建一个文件。env：

REACT_APP_API_URL=http://localhost:3001/

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

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

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