如何在 Vue 中将配置传递给 index.html

Question

我想将基于环境的 google 标签管理器 ID 传递到我的 vue 应用程序 index.html 中的脚本，但我找不到将配置传递到 html 文件。请协助。

这是脚本

<script>
  (function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != "dataLayer" ? "&l=" + l : "";
    j.async = true;
    j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer", "<env-gtm-id-goes-here>"
</script>

Answer 1

您可以使用html interpolation。 Refer here

结合vue Environment Variables。 Refer Here

例如：创建一个新文件名 .env 并进行输入 VUE_APP_ENVARS=prod 并在 index.html 中使用 html 插值

<p>The username to test is <%= VUE_APP_ENVIR %></p>

更新： 因为你需要在 <script> 标签中访问这个变量，所以使用这个

(window, document, "script", "dataLayer", "<%= VUE_APP_ENVIR %>"

如何在 Vue 中将配置传递给 index.html

How do I pass configurations to index.html in Vue

vue.js

vuejs2