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