Vue文件template模板调用config配置值报错的解决办法

Vue 的 template 模板仅能访问当前组件实例上暴露的属性，你在 script 块中引入的 config 默认不会挂载到组件实例上，因此模板无法识别该变量，才会抛出读取 images 属性失败的报错。

方案1：组件内局部使用（无需全局共享） #

选项式 API（Vue2/Vue3 通用） #

在组件的 data 配置中把引入的 config 暴露给实例即可：

import config from "../../config"
export default {
  data() {
    return {
      config
    }
  }
}

配置完成后模板里的原有写法不需要修改，可正常读取 config.images.server 的值。

Vue3 <script setup> 语法糖 #

直接在 script setup 顶层引入 config 即可，语法糖会自动把顶层声明的变量暴露给模板：

<script setup>
import config from "../../config"
</script>

方案2：全局挂载（全项目组件通用，无需重复引入） #

Vue3 配置方式 #

在项目入口 main.js 中挂载到全局属性：

import { createApp } from 'vue'
import App from './App.vue'
import config from "../config" // 替换为你自己的config文件路径

const app = createApp(App)
app.config.globalProperties.$config = config
app.mount('#app')

配置完成后，所有组件的 template 和 script 块都可以直接通过 $config 读取配置项，不需要再单独引入config文件。

Vue2 配置方式 #

在项目入口 main.js 中挂载到 Vue 原型：

import Vue from 'vue'
import App from './App.vue'
import config from "../config" // 替换为你自己的config文件路径

Vue.prototype.$config = config
new Vue({
  render: h => h(App)
}).$mount('#app')

使用方式和Vue3全局配置一致，所有组件直接调用 $config 即可。

内容的提问来源于stack exchange，提问作者jhfelectric