Vue js project not loading .env variables

user_3362334 0
Viewed 22583

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

npm vue.js
1 Answers

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.

user_87541710
Related