how to use import.meta.env.[key] in index.html

[yangmi0829]

i want to define variable in .env file, and use in index.html

[jclaveau]

This is now supported using %VITE_MY_CUSTOM_ENV_VAR% https://vitejs.dev/guide/env-and-mode.html#html-env-replacement

[bliu13]

Is there a way to access import.meta.env.[key] if it's within a <script> tag inside index.html?

[jclaveau]

In my case it works perfectly:

  <script>
    (function (w, d, s, l, i) {
      var f  = d.getElementsByTagName(s)[0],
          j  = d.createElement(s),
          dl = l != 'dataLayer' ? '&l=' + l : '';
      j.async = true;
      j.src = '/gtm.js?id=' + i + dl + '&%VITE_GTM_URL_OPTIONS%';
      f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-XXXXX');
  </script>

Did you follow the docs?

[bliu13]

I looked at the documentation, but for some reason I was under the assumption that variable replacements could only be done for the HTML portions. Your example helps immensely.