Reaction中的配置文件 [英] Profiles in React

问题描述

我正在尝试了解如何使用不同的配置文件运行Reaction应用程序(通过create-react-app创建)。

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

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

例如，在SpringBoot中，这可以通过应用程序"配置文件".properties来完成。

我通过NPM安装-g服务器和amp；服务器-s构建来运行应用程序。怎么做？

推荐答案

使用Create-Reaction-APP时，您可以使用环境变量配置您的应用程序。

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

所有环境变量都需要以REACT_APP_为前缀。

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

例如，要在生产中设置API URL，可以创建一个文件.env.Products，内容如下：

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

…默认情况下(对于本地开发)，创建一个文件.env：

REACT_APP_API_URL=http://localhost:3001/

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

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

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

这篇关于Reaction中的配置文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！