Vue js project not loading .env variables

Question

I am working on a Vue JS project. I made a .env file in the project's root directory. I made 3 variables. Here is the content of my .env:

API_BASE_URL=http://x.x.x.x:yyyy/myproject VUE_APP_TITLE=My App VUE_MY_VAR=My Var 

I put the logs inside the component that loads on startup in beforeMount() method like this:

beforeMount() {             console.log('base url: ' + process.env.API_BASE_URL);             console.log('base url: ' + process.env.VUE_APP_TITLE);             console.log('base url: ' + process.env.VUE_MY_VAR);         } 

When I run dev server using vue-cli-service serve I see the following console output:

base url: undefined base url: My App base url: undefined 

My question is: why is the value of API_BASE_URL and VUE_MY_VAR undefined

Answer 1

From docs:

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.

So you need to add VUE_APP_ prefix to your variables.