How do I pass configurations to index.html in Vue-CodePudding

I would like to pass google tag manager id based on the environment to my script in index.html in my vue app but I can't find a way to pass configs to a html file. Kindly assist.

Here is the script

<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>

CodePudding user response：

You can use the html interpolation. Refer here

In combination with the vue Environment Variables. Refer Here

For example: make a new file name .env and make entry VUE_APP_ENVARS=prod and use it inside your index.html with the html interpolation

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

Update: Since you need to access this variable in the <script> tag, use this

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