您如何在 HTML <script src="" 中引用 process.env 变量?反应

新手上路,请多包涵

我有一个反应应用程序,并且正在使用 dotenv-webpack 来管理我的 API 密钥。

我有: - 使用 API 密钥创建了一个 .env 并对其进行了 gitignored。 - 需要并添加 dotenv 作为 webpack.config.js 中的插件。

之后,我已经能够使用 process.env.api_key 引用 .js 文件中的一个键。但是我在尝试在脚本标记的 index.html 中引用它时遇到问题。

索引.html:

 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=process.env.GOOGLEMAP_API_KEY"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

我如何在这里引用 process.env.API_key?

 <script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script>

我曾尝试使用在 .js 文件中工作的反引号,例如 ${API_KEY} ,但这在 .html 文件中不起作用。

原文由 bigmugcup 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.3k
2 个回答

我将以下代码放在地图呈现的 componentWillMount 中并且它工作(至少在开发中: const API_KEY = process.env.GOOGLEMAP_API_KEY; const script = document.createElement(‘script’); script.src = https://maps .googleapis.com/maps/api/js?key= ${API_KEY}; document.head.append(script);

我能够使用上面评论中 bigmugcup 发布的代码来实现这一点。我没有修改 webpack.config.js 文件。

原文由 Tbot 发布,翻译遵循 CC BY-SA 4.0 许可协议

如果您已经在使用 create-react-app,则可以通过更新到

<script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_API_KEY%"></script>

正如 文档 中所说

您还可以在 public/index.html 中访问以 REACTAPP 开头的环境变量。

原文由 Taku 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题