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.

Solution 1

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.

Solution 2

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

Solution 3

Install dotenv-webpack and configure the vue.config.js file as follows.

npm install dotenv-webpack --save-dev

Add this to your config file:

const Dotenv = require('dotenv-webpack');


module.exports = {
  configureWebpack: {
    plugins: [
      new Dotenv()
    ]
  }
}

In your .env file make sure you add VUE_APP_ before your variables like this:

VUE_APP_VAR1=example
VUE_APP_VAR2=value

Now you can access these variables in your Vue application:

console.log(process.env.VUE_APP_VAR1); // "example"
console.log(process.env.VUE_APP_VAR2); // "value"

Here some links for reference:

• https://www.npmjs.com/package/dotenv-webpack
• https://cli.vuejs.org/guide/webpack.html
• https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

Solution 4

so I use VUE_APP_API_URL (this doesn't work) then I change it to VUE_APP_APIURL (this works)

hope it helps

Solution 5

If your vue-cli version is higher than 3.x and you put your .env files in root directory like said in comments. Than you can access your environmental variables from components (like this process.env.VUE_APP_YOUR_VARIABLE). As said in vue-cli docs

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code: console.log(process.env.VUE_APP_SECRET)

View more solutions

Comments

[Jimmy Garpehäll]

Thanks. I've been looking for a solution for several hours now. It's so strange as host and port was overwritten in config/index.js with a simple require('dotenv').config();. I would never have guessed that I would need anything extra to use the variables in Vue components.

[phil]

If someone is as stupid as I am, I missed the fact that the files should start with .env (for example, only the file name .env). Instead, I used the myconfig.env file, which was wrong. So in my vue app builded with cli 3.x it works without any dotenv.config or something like that

[babis21]

Even with HMR, this didn't work until I reloaded the server :/

[M3RS]

Yes, HMR will not help with environment variables. The project needs to be rebuilt for changes to take effect.

[Robin Manoli]

Also save the .env files. Every time you change them. And then restart again.

[Steven]

I have searched a lot, but this is the only solution I tried which works with webpack without vue-cli. This did the trick for me.

[wfgeo]

Another tip: Coming from Python I am conditioned to manually loading the .env file. It took me an embarrassingly long amount of time to realize that you do not need to explicitly load it anywhere. Just put it in the root folder, follow this answer's instructions, and let the magic work itself.

[Yevgeniy]

in my case it was the missing VUE_APP_ prefix, thx

[Žilvinas]

in my case, I've spent the whole day trying everything but I had my .env files in uppercase and that caused them to stop working after building the app in a pipeline

[Nimish David Mathew]

It was the missing VUE_APP_ prefix. So we can't use variables without this prefix in the .env file?

[Vi100]

I would upvote you one hundred times if I could!!! That's a really weird requirement that I supose is coming from the unix/linux universe. Since I'm working on windows I never thought about something like this could happen. A million thanks for sharing your case!

[hatef]

GOD! Why did no one tell me the variable names should start with VUE_APP_ before? This thing drove me crazy this morning! THANKS!

[LUISAO]

IT works! Thank You. I had to SAVE (i forgot) the .env file : ) and i had to stop and close de browser. I restart the server, open the browser, and it works!

[Uncoke]

point 3 (restart server) fixed mine! Thanks!

[theberzi]

This does not work for me. The config file causes a TypeError: Cannot read properties of undefined (reading 'get').