2

问题：我是新手React JS，正在寻找从外部属性文件读取环境配置的选项。这个问题对于我的一位客户来说更为具体，他希望可以选择动态更改环境文件。例如，hostname/port只要有变化就动态地改变。构建过程不属于我的客户。我创建了一个缩小的最终包，我的客户将其部署在该包上tomcat/web server.

尝试过的解决方案：通过一些读数，我已经为不同的环境配置了 .env 文件，并且能够成功地从这些文件中读取配置。但是，这些更多的是构建过程环境文件。而且，我正在尝试找到一种在创建包后从外部源读取配置的方法。

可能的解决方案：这是我能想到的一种可能的方法 -

使用“properties-reader”之类的库读取外部属性文件。我将提供属性文件作为我的发布包（即构建文件夹）的一部分。我的客户可以在需要时更改此属性文件。

请建议这是正确的方法还是有更好的解决方案？

4

2 回答 2

6

对我有用的解决方案！

1）在反应项目的公共文件夹中创建一个“config.js”文件。“config.js”文件的示例内容 -

window.env = {
  API_DOMAIN_ADDR: "http://localhost:8080"
};

2) 参考 index.html 中的“config.js”文件。index.html 的代码将是 -

<body>
    <div id="root"></div>
    <script src="%PUBLIC_URL%/config.js"></script>
  </body>

3) 现在，可以访问 config.js 文件的内容来响应代码。检索 config.js 变量值的示例代码 -

window.env.API_DOMAIN_ADDR

在需要访问变量值的任何地方添加此代码。我在进行 ajax 调用的服务类中添加了这个。

于 2019-11-12T22:45:19.783 回答
0

我建议使用Firebase Realtime DB 之类的东西。我对将应用程序构建指向我公司的生产或开发服务器 API 有类似的要求。为此，我们使用加载 Firebase 配置并从那里加载用于获取主机服务器端点的 UI。

优点：

  • 这使您不必每次都部署构建文件夹。
  • 这是实时的，不易出错。
  • FirebaseDB 对于这样的小东西是免费的。

第二个选项是创建两个我看到你已经完成的环境文件。

于 2019-11-11T05:58:40.840 回答