在 index.html 中使用环境变量

Posted 2023-03-13

【中文标题】在 index.html 中使用环境变量

【英文标题】：Use environement variable in index.html

【发布时间】：2020-03-02 23:30:35

【问题描述】：

我正在使用 Angular，我想在我的 index.html 中使用一个环境变量来进行谷歌分析。我试过这样：

<script>
    import environment from "./environments/environment";
</script>
<!-- End Google Tag Manager (noscript) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=" + environment.googleAnalytics></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag()dataLayer.push(arguments);
    gtag('js', new Date());


    gtag('config', environment.googleAnalytics);
</script>

但不能在脚本链接中工作。你能帮我吗 ？在这个地方 https://www.googletagmanager.com/gtag/js?id=" + environment.googleAnalytics 没有工作这个串联

【参考方案1】：

您应该创建 index.html 的副本并将其命名为 index.someenv.html。然后在你的 angular.json 中环境配置设置文件替换：

"fileReplacements": [
    "replace": "src/index.html",
    "with": "src/index.someenv.html"
]

Angular cli 将在您运行构建时替换这些文件

【参考方案2】：

需要在您的依赖项中添加谷歌分析，然后将您的跟踪代码添加到 index.html，如以下链接所述。

npm install --save @types/google.analytics

此链接可能有助于找到解决方案。通过这个线程。

Angular 4+ using Google Analytics

【参考方案3】：

这样做的一个好方法是使用不同的index.html 文件（index.dev.html、index.prod.html 等），您可以在其中明确定义所需的环境变量。然后，使用文件替换功能，在它们之间切换（与替换环境文件的方式相同）。

"fileReplacements": [
    
        "replace": "src/index.html",
        "with": "src/index.prod.html"
    
]

【参考方案4】：

你不能写这样的连接，因为<script>是一个html标签，它不是javascript代码。也许您想通过 javascript 加载该脚本，这样您就可以连接您的 environment.googleAnalytics 属性。