VueJS - Why is process.env file not defined in HTML part of Vue component?

Question

In the HTML part of the application process.env is undefined or not exists.

Example:

And this works, but if I set variable in a bind src in HTML part:

TypeError: can't access property "env", _ctx.process is undefined

As result env not exist.

Why?

Igor Moraru · Accepted Answer · 2021-07-05 11:22:30Z

1

Because process is available during compilation only, not at runtime.

The recommended way of accessing env variables in templates is trough a computed property:

<img 
  v-if="newsData[0].post[0].featured_image.slug" 
  :src=" `${imageRoot}` + this.newsData[0].post[0].featured_image.slug " />

computed: {
  imageRoot(){
    return process.env.VUE_APP_IMG_ROOT
  }
}

answered Jul 5, 2021 at 11:22

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

VueJS - Why is process.env file not defined in HTML part of Vue component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related