Undefined Vue Cli Init

Posted on  by admin
Modified1 month ago.

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

It just returns undefined. 4040 bronze badges. 1,02311 gold badge99 silver badges1919 bronze badges. 99 silver badges1919 bronze badges.

A few tips for people who land here:. Make sure your .env files are in the project root folder (and not in say src/). Variable names should start withVUE_APP_ if to be statically embedded into the client bundle.

Restart the dev server or build your project for changes to take effect.

Minjun YuMinjun Yu

In old Vue versions environment variables were defined in e.g. config/dev.env.js instead of the .env files in root.

55 gold badges2929 silver badges4040 bronze badges. 4040 bronze badges. 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.

11 gold badge99 silver badges1919 bronze badges. 1919 bronze badges. Install dotenv-webpack and configure the vue.config.js file as follows.

Add this to your config file:.

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

Now you can access these variables in your Vue application:.


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

I put my .env file in the root directory and appended each variable with VUE_APP_.

To demonstrate this, for example, if the variable you want to use is API_BASE_URL.

In your .env file, you put the variable as VUE_APP_API_BASE_URL=baseurl/api/v1.

To access it in your files, you do process.env.VUE_APP_API_BASE_URL.

Never put any sensitive information you don't want anybody to see, on your front-end.
The most common thing you won't want anybody to see (as regards web development) is your API Key. There are real consequences to doing this.

Not the answer you're looking for? Browse other questions tagged vue.jsvue-cli or ask your own question.