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

Question

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 ?

To answer this it is important to know how you are you serving your Vue project — Imre_G
– Imre_G, Commented Sep 18, 2018 at 9:01
@Imre_G I am using vue ui, and then running this command vue-cli-service serve --open . So you cannot use process.env in html script tags if I am not mistaken — okandas
– okandas, Commented Sep 18, 2018 at 9:13
I think you are correct. Maybe you can check this out: github.com/Glovo/vue-multianalytics#mixpanel — Imre_G
– Imre_G, Commented Sep 18, 2018 at 9:27

matteogll · Accepted Answer · 2019-09-19 09:13:42Z

22

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

edited Sep 19, 2019 at 9:13

answered Sep 19, 2019 at 7:44

matteogll

9911 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mustafa Over a year ago

I tried but not working.

A-Diddy Over a year ago

The default vue-webpack config seems to only utilize /.env properties that start with the string, "VUE_APP_".

Misael Abanto · Accepted Answer · 2021-04-17 20:04:04Z

4

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.

answered Apr 17, 2021 at 20:04

Misael Abanto

3734 silver badges8 bronze badges

3 Comments

Mustafa Over a year ago

I tried but not working.

timbmg Over a year ago

does this work for variables in .env.production?

Misael Abanto Over a year ago

Yes, .env.production is only a way to define env var for that specific environment. More info: create-react-app.dev/docs/adding-custom-environment-variables/…

TinyTiger · Accepted Answer · 2023-03-08 06:16:23Z

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

okandas · Accepted Answer · 2019-10-31 12:29:52Z

0

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 .

answered Oct 31, 2019 at 12:29

okandas

12.3k2 gold badges20 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Related