React JS - 从外部属性文件中读取配置？

Posted 2023-02-26

【中文标题】React JS - 从外部属性文件中读取配置？

【英文标题】：React JS - Reading configurations from external property file?

【发布时间】：2021-05-30 20:08:11

【问题描述】：

当前情景

我有一个部署在 JBoss 服务器上的 react 应用，现在这个部署的 war 文件有一些 axios 调用，它们从 backend 服务器获取数据已部署战争文件。

现在，这个后端服务器的端口和IP是硬编码在axios调用中，目前不能动态更改。示例：- axios.get('http://192.168.xxx.xxx:8080/api/warehouses')

所需场景

现在，如果我们的后端部署从 192.168.xxx.xxx:8080 更改为 Server - 176.153.xxx.xxx:9000，则在部署 React 应用程序后，我们需要它strong>，我们不需要重新部署我们的前端代码， 所以我们可以直接从property或者json文件中读取ip和port。

---

所以，现在如果我在 react 项目中的 SRC 中创建一个 property 或 json 文件，然后导入这个文件并读取值，它工作正常，但是在使用 npm run build 构建之后，我不是能够更新此属性或 json 文件。

所以我搜索并找到了环境变量，但它们也不是解决方案。

找到了这个链接，但它也在 src 中创建了 json 文件。 https://www.pluralsight.com/guides/how-to-store-and-read-configuration-files-using-react

那么，这是否可以实现，如果可以，方法是什么？

谢谢！

【问题讨论】：

只需将配置文件放入您的公用文件夹即可。从 React 内部，你可以使用 axios 加载它：axios.get("/config.json")（另外，环境变量绝对是解决这个问题的通用解决方案，你为什么会这么想呢？）

关于环境变量，我在某处读到，在构建react app的build文件夹时设置了值，之后只能读取值。

构建的 React 应用程序只是一堆静态文件，例如由 Apache 或 node 提供服务。所以当我们谈论环境变量时，我们谈论的是服务器，而不是 React 应用程序。将数据传递给构建的应用程序就像将 <script>const serverURL = "...";</script> 插入 React 应用程序的 index.html 一样简单。或者使用任何其他方法，例如使用 index.php 并读取 .env 文件并将其转储到 HTML 中。

【参考方案1】：

就像 Chris G 评论的那样，您可以制作一个 json 文件并将其加载到您的 javascript 文件中，但我建议在这种情况下使用依赖注入和工厂。

这里有一个例子：

首先我在 config 文件夹中创建了一个 json 文件： https://github.com/lesimoes/COVID-MG/blob/master/config/env.prod.json

然后我创建了一个加载配置文件并注入服务的工厂，在本例中为 SQS 服务： https://github.com/lesimoes/COVID-MG/blob/master/src/factories/queueFactory.js#L3

您可以更改 json 文件中的值而无需部署您的应用程序，但我想您需要重新启动它。