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 ?
3 Answers
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
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.
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 .
Related