VueJS-为什么process.env文件没有在Vue组件的HTML部分中定义

Question

在应用程序的HTML部分中，process.env未定义或不存在。

示例：

<img v-if="newsData[0].post[0].featured_image.slug" :src=" `domain as string` + newsData[0].post[0].featured_image.slug " />

这是有效的，但如果我在HTML部分的绑定src中设置变量：

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

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

结果env不存在。

为什么？

Answer 1

因为process仅在编译期间可用，而不是在运行时可用。

访问模板中env变量的推荐方法是通过计算属性：

<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
}
}