CODEWITHSUNDEEP
vue.jswebpackvue-cli
okandas
okandas

Reputation: 12274

vue js how "process.env" variables in index.html

I am trying to use env variables in my html markup to change env variables according to whether I am in production or development mode .. So for context using mixpanel I have two projects one for development and one for production with different api keys. how would I use webpack to do this, accessing my process.env.VUE_APP_MIXPANEL env variable in my html ?

Upvotes: 19

Views: 19667

Answers (4)

TinyTiger
TinyTiger

Reputation: 2053

When using .env in index.html as HTML you can use this:

<link
  rel="icon"
  type="image/ico"
  href="<%= process.env.FAVICON_ICO_URL %>"
/>

or this:

<title><%= process.env.SITE_TITLE %></title>

When using .env variables injected into tags of index.html you need to use them as a string like this:

<!-- Google Tag Manager -->
<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.GTM_CONTAINER_ID %>'
  );
</script>
<!-- End Google Tag Manager -->

Upvotes: 3

Misael Abanto
Misael Abanto

Reputation: 364

With Google reCAPTCHA, I included my script like this:

<script src="https://www.google.com/recaptcha/api.js?render=<%= process.env.VUE_APP_RECAPTCHA_SITE_KEY %>"></script>

The env var is VUE_RECAPTCHA_SITE_KEY. It may be present in .env file.

Upvotes: 4

okandas
okandas

Reputation: 12274

To answer my own question, I then came across this package that allows me you to add google analytics to your vue projects .. https://github.com/MatteoGabriele/vue-analytics or https://github.com/Glovo/vue-multianalytics if you also want to add other tracking providers .

Upvotes: 0

matteogll
matteogll

Reputation: 951

If you are using the default Webpack template you can access the .env variables in index.html using this syntax (for example):

<html>
  <head>
    <title><%= VUE_APP_TITLE %></title>
  </head>
  <body>
    ...
  </body>
</html>

Obviously you need to have a variable like this

VUE_APP_TITLE=My title

in your .env file

Upvotes: 22

Related Questions