html - 在模板中访问 vue 环境变量

Question

我想从 vue 单文件组件的模板中访问我的环境变量
但是，请执行以下操作:

<img :src="`${process.env.VUE_APP_API_BASE_URL}/image/${image.filename}`" alt="" />

给我错误:

 Property or method "process" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

我知道我的环境变量设置正确，因为我可以在其他地方使用它们，我可以使用解决方法在组件上创建一个新变量并引用:

data() {
  return {
    BaseUrl: process.env.VUE_APP_API_BASE_URL,
  };
},

<img :src="`${BaseUrl}/image/${image.filename}`" alt="" />

并且能够正确加载图像，但是如何直接在模板中访问 env 变量而无需为每个组件初始化一个新变量？

Answer 1

process.env环境变量在编译时替换为实际值。该错误意味着这不会发生在模板中。
事物可以定义globally对于所有组件，例如对于 Vue 2:

Vue.prototype.$baseUrl = process.env.VUE_APP_API_BASE_URL;

将过多的代码放入模板是一种不好的做法。在这种情况下，图像 URL 可以定义为 computed ，或作为 method为 image由 v-for 提供.