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

【问题标题】：How to hide api key within script src with dotenv如何使用 dotenv 在脚本 src 中隐藏 api 键
【发布时间】：2019-12-18 06:37:31
【问题描述】：

我试图隐藏我的谷歌地图的 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

【问题讨论】：

标签： javascript node.js api dotenv

【解决方案1】：

您可以使用一些 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

希望对你有帮助。

【讨论】：