动态脚本中的 .env 变量

Question

所以我使用谷歌地图api制作了一个非常简单的天气应用程序，我想将其推送到git然后部署它。 我遇到了隐藏 api 密钥的问题。 我尝试使用 dot.env 变量，但我似乎无法运行脚本。 最初我在标签中使用了"async defer src="，但无法正确连接(这是正确的术语吗？SRC. 一个建议是动态创建脚本，我已经这样做了，但现在无法渲染地图。 我还被告知使用网络包来编译它(???(。 我对编程还很陌生，所以我不确定如何完成这项工作。 我将在下面提供一些代码：

<script>
function initMap() {
let lat = <%= data.coord.lat%>;
let lng =   <%= data.coord.lon%>;
let center = {lat: lat, lng: lng };
console.log(lat, lng);
let map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: center,
scrollwheel: false
});
let marker = new google.maps.Marker({
position: center,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
};
const script = document.createElement('script');
script.defer = true;
script.async = true;
script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_API_KEY}&callback=initMap`;
document.appendChild(script);
</script>

这是我最初的尝试。 这将呈现地图，但不能使用 .env 变量：

<script
async defer src="https://maps.googleapis.com/maps/api/js?key={MY_API_KEY}&callback=initMap"></script>

几周来我一直在努力完成这项工作，以便我可以推动和部署。 如果有人能帮忙，我将不胜感激！

Answer 1

您不能真正隐藏将在浏览器上加载的任何脚本标记或客户端 JavaScript 代码。即使您使用 webpack 进行编译，访问该网站并知道如何使用开发人员工具的任何人都可以看到它。

您只需要限制对站点的 api 密钥的访问，以便其他站点不会使用您的 api 密钥。

以下是有关如何保护您的 API 密钥免受 Google 侵害的最佳做法：https://developers.google.com/maps/api-key-best-practices