如何从公用文件夹中访问环境变量？

Posted 2023-02-24

【中文标题】如何从公用文件夹中访问环境变量？

【英文标题】：How do I access an environment variable from within the public folder?

【发布时间】：2019-11-23 16:02:10

【问题描述】：

在我的 create-react-app 应用程序中，我的公共文件夹中有一个 javascript 文件。在其中，我需要访问一个名为REACT_APP_ACTUAL_ENV 的环境变量，但我不确定我该怎么做。尝试通常的process.env.REACT_APP_ACTUAL_ENV 不起作用，因为process 在公用文件夹中未定义。查看https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables，我可以在公共文件夹中的html 文件中执行%REACT_APP_ACTUAL_ENV%，它工作得很好。但问题是我需要以某种方式在 javascript 文件中执行此操作，但我不确定是否可能。

【问题讨论】：

你找到在js文件中的方法了吗？

很遗憾，没有。我必须找到一种涉及通过本地存储进行通信的解决方法。

参考这个：create-react-app.dev/docs/adding-custom-environment-variables/…

【参考方案1】：

在我的例子中，我必须引用 REACT_APP_FACEBOOK_APP_ID 环境变量来初始化 public/index.html 文件中的 Facebook SDK。

我只是将变量分配给 HTML 元素的属性，然后使用 JavaScript 访问它，如下所示：

...
<meta property="fb:app_id" content="%REACT_APP_FACEBOOK_APP_ID%" />

<script>
   const facebookAppId = document.querySelector('[property="fb:app_id"]').content;
   // use `facebookAppId` here
</script>

【讨论】：

这对于大多数用例来说可能已经足够了，但是，如果我没记错的话，我需要从扩展的后台脚本中访问环境变量，因此从 HTML 文件中编写脚本是行不通的。它必须来自 .js 文件，这可能是不可能的。