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

我是 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存储在配置文件中,因此当我在测试服务器或生产上部署它时,我必须更改配置文件上的URL而不是在js文件中,但我不知道如何在react中使用配置文件.js

任何人都可以指导我如何实现这一目标?


答案 1

使用webpack,您可以将特定于环境的配置放入字段中externalswebpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

如果要将配置存储在单独的 JSON 文件中,也可以这样做,您可以要求该文件并分配给 :Config

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

然后在模块中,您可以使用以下配置:

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

对于 React:

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

不确定它是否涵盖了您的用例,但它对我们来说一直很有效。


答案 2

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

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

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

REACT_APP_NOT_SECRET_CODE=abcdef

请注意,变量名称必须以REACT_APP_

您可以从组件访问它

process.env.REACT_APP_NOT_SECRET_CODE