Javascript 如何存储配置文件并使用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文件中的Url，但我不知道如何在react.js中使用配置文件

---

有谁能指导我如何实现这一点吗？

使用webpack，您可以将特定于环境的配置放入

webpack.config.js中的
externals
字段中

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(...);

不确定它是否涵盖了您的用例，但它对我们来说运行得很好。
如果您使用了Create React App，您可以使用.env文件设置环境变量。文件如下：


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

REACT_APP_NOT_SECRET_CODE=abcdef

请注意，变量名必须以REACT\u APP\u开头

您可以使用从组件访问它

process.env.REACT_APP_NOT_SECRET_CODE

无论使用何种设置，都可以使用dotenv包。它允许您在项目根目录中创建.env，并像这样指定键

REACT_APP_SERVER_PORT=8000

在应用程序条目文件中，只需调用dotenv（）；在像这样访问密钥之前

process.env.REACT_APP_SERVER_PORT

如果您有.properties文件或.ini文件
实际上，如果您有任何具有如下键值对的文件：

someKey=someValue
someOtherKey=someOtherValue

您可以通过一个名为

我发现这非常有用，因为我正在将react与Java Spring框架集成，其中已经有一个application.properties文件。这有助于我将所有配置放在一个地方

从package.json中的dependencies部分导入
“属性读取器”：“0.0.16”

将此模块导入顶部的webpack.config.js
const PropertiesReader=require（'properties-reader'）

读取属性文件
const appProperties=PropertiesReader（'Path/to/your/properties.file'）。\u properties

将此常量作为配置导入
外部：{
“Config”：JSON.stringify（appProperties）
}

使用方法与公认答案中提到的相同
var Config=require（'Config'））
fetchData（Config.serverUrl+'/Enterprises/…'）
是否使用webpack或其他工具编译js代码？通常会将该值作为JavaScript中可用的全局值发送、设置并从环境变量读取到网页。然后，用它来获取数据。@PetrBela:是的，我正在使用webpack来构建bundle.js，但我正在使用.net中的web.config之类的配置文件，不客气。顺便说一句，我们了解到最好使用JSON来避免语法错误。我已经相应地更新了代码。嗯，我还没有意识到需要解析JSON文件。因为
externals
需要对代码进行求值，所以您需要对JSON进行字符串化。这对我来说不起作用，我得到了以下错误：[错误：在使用require（'Config'）时找不到模块'Config']，如果我希望webpack不将单独的配置文件捆绑到output.bundle.js中该怎么办？如果它是一个单独的包，我还需要（'Config'）吗？谢谢你们有人把这个用在工作上了吗？我完全按照建议操作，得到的结果是“找不到模块'Config'，与@amgohan相同。请记住，您的变量名必须以
REACT\u APP\uuu
开头。我使用REACT模板创建了一个ASP.NET核心应用程序，我所做的只是在“ClientApp”文件夹下添加一个空文件，并将
REACT\u APP\u MYSETTING=value
放入其中，然后在我的JSX代码中将它称为
process.env.REACT\u APP\u MYSETTING
，它就工作了。谢谢在create-react-app-project中，env对我根本不起作用一旦将.env添加到根目录中，您就必须在npm上重新启动您的项目directory@Rob关键不是它是一个秘密，而是它随环境而变化。我有一个应用程序，部署到全国四个数据中心的1200台服务器上，每个数据中心最多8个集群，每个集群上应用本地API端点。你不想硬编码这样的东西…虽然我认为你需要指定你的键，从
REACT\u APP\uu
关于webpack.config.js的步骤2开始，如果你正在使用create REACT APP，那么就没有webpack config（或者它是隐藏的）。在那种情况下如何进行？