如何存储配置文件并使用React读取

JavaScript

蛋蛋小卤蛋

2020-03-12

我是React.js的新手，我实现了一个组件，在其中我从服务器中获取数据并像这样使用它， 

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

我想将Url存储在配置文件中，因此当我将其部署在测试服务器或生产环境中时，我只需要更改config文件中的url（而不是js文件中的URL），但是我不知道如何在react.js中使用配置文件

谁能指导我如何实现这一目标？

第1347篇《如何存储配置文件并使用React读取》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Tom乐小小 2020.03.13

如果使用了Create React App，则可以使用.env文件设置环境变量。文档在这里：

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

基本上，在项目根目录的.env文件中执行类似的操作。

REACT_APP_NOT_SECRET_CODE=abcdef

您可以使用以下命令从组件中访问它 

process.env.REACT_APP_NOT_SECRET_CODE
JimGil前端 2020.03.13

无论使用哪种设置，都可以使用dotenv软件包。它允许您在项目根目录中创建一个.env，并像这样指定密钥

REACT_APP_SERVER_PORT=8000

在应用程序入口文件中，只需调用dotenv（）;。在像这样访问密钥之前

process.env.REACT_APP_SERVER_PORT

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android