Vue项目如何向index.html传递配置以动态注入GTM ID

方案1：构建阶段静态插值（最推荐，性能最优） #

直接利用Vue对应构建工具的HTML环境变量注入能力，编译时直接把对应环境的GTM ID替换进index.html。

Vite 构建项目 #

1. 在项目根目录对应环境的变量配置文件中定义GTM ID，变量名必须以VITE_为前缀：

• 开发环境（.env.development）：VITE_GTM_ID=GTM-DEV12345
• 生产环境（.env.production）：VITE_GTM_ID=GTM-PROD67890

2. 把index.html里的GTM脚本占位符替换为%VITE_GTM_ID%即可：

<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", "%VITE_GTM_ID%")
</script>

Vue CLI（webpack）构建项目 #

1. 在项目根目录对应环境的变量配置文件中定义GTM ID，变量名必须以VUE_APP_为前缀：

• 开发环境（.env.development）：VUE_APP_GTM_ID=GTM-DEV12345
• 生产环境（.env.production）：VUE_APP_GTM_ID=GTM-PROD67890

2. 把index.html里的GTM脚本占位符替换为<%= process.env.VUE_APP_GTM_ID %>即可：

<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", "<%= process.env.VUE_APP_GTM_ID %>")
</script>

方案2：运行时动态加载（灵活度最高） #

如果需要更灵活的判断逻辑，可以把GTM初始化逻辑放到入口文件main.js中，运行时读取环境变量动态加载：

// main.js
// 读取对应环境的GTM ID，Vite用import.meta.env.VITE_GTM_ID，Vue CLI用process.env.VUE_APP_GTM_ID
const gtmId = import.meta.env.VITE_GTM_ID
if (gtmId) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
  const f = document.getElementsByTagName('script')[0];
  const j = document.createElement('script');
  j.async = true;
  j.src = `https://www.googletagmanager.com/gtm.js?id=${gtmId}`;
  f.parentNode.insertBefore(j, f);
}

内容的提问来源于stack exchange，提问作者Raycee