Vue-cli 3 Environment Variables all undefined

Question

I've tried all of the solutions out there but none seem to work for me. I just want to store some values in a .env file within my Vue app but simply trying to log process.env returns an empty object from within the component.

My .env file

VUE_APP_URL={api url} VUE_APP_TOKEN={token} 

My plan was to set these environment variables to data properties but it always returns undefined. If I do console.log(process.env.NODE_ENV) from webpack.config.js it will show that I'm in development but if I tried doing the same from within the component like

mounted() {     this.$nextTick(() => {       console.log(process.env.VUE_APP_URL);     })   } 

It just returns undefined.

Answer 1

A few tips for people who land here:

1. Make sure your .env files are in the project root folder (and not in say src/)
2. Variable names should start with VUE_APP_ if to be statically embedded into the client bundle
3. Restart the dev server or build your project for changes to take effect
4. If you are migrating from a webpack based solution make sure that you replace : (from JSON config) with = (dotenv format). Easy to miss
5. Make sure you've saved any changes to your .env files.
6. In old Vue versions environment variables were defined in e.g. config/dev.env.js instead of the .env files in root

Answer 2

I figured it out - I had to install dotenv-webpack and initialize it in webpack.config.js which is odd because none of the docs stated that I needed to do so.