Vue cli - TypeError: Cannot read property 'env' of undefined

Question

I'm trying to use process.env in my vue app. I've created two .env files one for production .env.production and another for dev .env.development. the two files are in the root of my vue project but vue cli will ignore them. I have created an envoirment variable that I'm calling in my Home.vue component to set the path of an image for the dev/production that will be different. the problem is that after the build when I run my app to test it I will get this error

TypeError: Cannot read property 'env' of undefined

and it's related to the path set into the src tag of the image I want to load

<img class="img-fluid" :src="`${process.env.VUE_APP_PATH_START}/img/background.jpg`">

my .env files looks like this development env file

VUE_APP_PATH_START = ../assets/

production env file

VUE_APP_PATH_START = /

Is there any reason why I get this error in my build and how I can fix it?

Answer 1

Try to define it as a computed property using require function :

computed:{
    background(){
        return require("`${process.env.VUE_APP_PATH_START}/img/background.jpg`")
  }
}

template :

 <img class="img-fluid" :src="background"/>