在模板中访问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，或者对于 v-for 提供的 image 定义为 method。

在模板中访问vue环境变量

access vue environment variables in template

html

templates

environment-variables

vue.js