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

cli.vuejs.org/guide/mode-and-env.html#environment-variables

Eric Guan
– Eric Guan

2020-06-27 23:38:40 +00:00
Commented Jun 27, 2020 at 23:38 — Eric Guan
– Eric Guan, Commented Jun 27, 2020 at 23:38

jklemmack · Accepted Answer · 2022-02-16 19:38:31Z

110

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.

edited Feb 16, 2022 at 19:38

jklemmack

3,6363 gold badges35 silver badges59 bronze badges

answered Jun 28, 2020 at 7:12

thks173

1,7481 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Damon Over a year ago

I'll also add that you may need to completely stop and restart your localhost so your app can pick up the changes.

Basheer Kharoti Over a year ago

Ah god. I was really frustrated as what really is wrong with my environment variable :)

user2872885 Over a year ago

Yep, very frustrating. Thanks for the answer.

Collectives™ on Stack Overflow

Vue js project not loading .env variables

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related