Vue SFC 文件类型错误

之前在整理 Vitepress 文档时，发现打开 components/Button.vue 文件，VScode 会提示报错 Property '$attrs' does not exist on type '{}'.ts(2339)。但是仍然可以正确的编译打包。

<template>
  <a class="btn" v-bind="$attrs"> // [!code error] Property '$attrs' does not exist on type '{}'.ts(2339)
    <slot></slot>
  </a>
</template>

<style scoped>
.btn {
    // ...
}

经过排查后发现，是因为package.json文件中没有声明vue依赖，导致Volar没有办法正确的识别Vue SFC的类型。

因为Vitepress本身是依赖于vue的，所以在打包的时候可以正常编译通过。

解决方法

安装 vue 依赖。

pnpm i vue

排查路径

出现这种问题时，请注意检查以下几项：

• 确认项目中配置了tsconfig.json，并且include的配置包含了该文件。
• 确认项目安装了Vue Language Features和Typescript Vue Plugin这两个插件。
• 确认项目的package.json文件的依赖中包含vue。