.Environment variables don't work in Vue.js

Question

I have .env file in the root of my project in Vue3. In the components folder, I have Card.vue and this code

console.log(process.env.FOO)

But in browser, it shows undefined.

Ivan Ivanov · Accepted Answer · 2021-03-19 11:53:05Z

4

Variables must start with VUE_APP, hence

`VUE_APP_FOO`

answered Mar 19, 2021 at 11:53

Ivan Ivanov

2,10616 silver badges35 bronze badges

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

2 Comments

ToklCz Over a year ago

It shows this 'VUE_APP_FOO' is not defined while running npm run serve

Ivan Ivanov Over a year ago

Please, first change name of the variable to VUE_APP_FOO in .env file, and then refer to it.

juanmac · Accepted Answer · 2021-03-22 20:57:51Z

1

Having a similar problem here. I'm usnig VUE_APP_FOO to set the variable in .env but it's still undefined when console.log(process.env.VUE_APP_FOO). Using Vue2 (Vue cli 4.5.11)

edited Mar 22, 2021 at 20:57

answered Mar 22, 2021 at 20:49

juanmac

3291 gold badge5 silver badges16 bronze badges

1 Comment

juanmac Over a year ago

In my case solved checking for a annoying misspelling and restarting. @ToklCz try console.log(process.env) for debugging

Collectives™ on Stack Overflow

.Environment variables don't work in Vue.js

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related