如何使用dotenv在脚本src中隐藏api键

2024-07-27 • 问答

我正在尝试隐藏Google地图的api密钥，以便可以推送代码，但似乎无法使process.env.API_KEY变量正常工作。这可能吗？我尝试用引号连接并在模板文字中使用反引号，但似乎无法使其正常工作。


    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);
          });
        };

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=process.env.API_KEY&callback=initMap
"></script>

我的.env文件具有：

API_KEY = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

huzhuangc 回答：如何使用dotenv在脚本src中隐藏api键

您可以使用一些javascript动态创建脚本标签：

const script = document.createElement('script');
script.defer = true;
script.async = true;
script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.API_KEY}&callback=initMap`;
document.appendChild(script);

但是您将需要像webpack这样的捆绑器来正确地进行打包。我给你留下了这个链接：https://www.robertcooper.me/front-end-javascript-environment-variables

希望有帮助。

api dotenv javascript node.js

本文链接：https://www.f2er.com/2902974.html

如何使用dotenv在脚本src中隐藏api键

huzhuangc 回答：如何使用dotenv在脚本src中隐藏api键

大家都在问