Quasar配置Vue3全局属性后VSCode提示属性不存在报错如何解决？

问题本质 #

这是Vue类型检测工具（Volar/Vetur）的类型声明缺失导致的IDE提示错误，不影响实际代码编译和运行，不属于代码逻辑错误或者Vue本身的bug。
你挂载在app.config.globalProperties上的全局属性默认可以直接在组件模板中访问，不需要额外赋值到本地data中，你可以先删掉Login.vue中data里的backChat: this.backChat声明，直接在模板里写{{ backChat.version }}即可正常展示。

修复IDE类型报错 #

步骤1：添加全局类型声明 #

在项目src目录下新建shims-backchat.d.ts类型声明文件，写入以下内容：

import { ComponentCustomProperties } from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    backChat: {
      version: string
      // 后续给backChat扩展其他属性时，在这里补充对应类型即可
    }
  }
}

步骤2：适配JS项目（TS项目可跳过） #

如果你的项目是JavaScript项目，需要在根目录的jsconfig.json中配置include字段，确保类型声明文件被IDE检测到：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "include": ["src/**/*", "src/shims-backchat.d.ts"]
}

可选：本地data声明的修复方案 #

如果你确实需要将全局属性赋值到本地data中使用，可以通过JSDoc标注类型规避报错：

export default {
  data() {
    return {
      /** @type {{version: string}} */
      backChat: this.backChat
    }
  }
}

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