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

Question

我想将基于环境的谷歌标签管理器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。请参阅此处

与vueEnvironment Variables。参考此处

例如：创建新文件名.env并创建条目VUE_APP_ENVARS=prod，并在index.html中使用html插值

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

更新：由于您需要访问<script>标记中的此变量，请使用此

(窗口、文档、"脚本"、"数据层"、"<%=VUE_APP_ENVIR%>">