我有一个反应应用程序,并且正在使用 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 许可协议
我能够使用上面评论中 bigmugcup 发布的代码来实现这一点。我没有修改 webpack.config.js 文件。