Question

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

上

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

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

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

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

Answer 1

对我有用的解决方案！

1）在react项目的公用文件夹中创建一个“ 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调用的服务类中添加了此代码。

Answer 2

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

优势：

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

第二个选项是创建两个环境文件，我看您已经完成了。

React JS-从外部属性文件读取环境配置

2 个答案: