解决 VitePress 在 docs中vue 文件导入的 ts 类型的组件报错:Cannot find module...or its corresponding type declarations

报错

vscode 中 ts-plugin 报错提示：

Cannot find module '@/components/Collapse/Collapse.vue' or its corresponding type declarations

意思就是找不到 @/components/Collapse/Collapse.vue 这个组件，或者是它的类型声明文件。一般情况下这个报错是因为缺少类型声明，往下看请确保两件事：

• 文件在项目中路径是正确导入的，也就是文件能够被正确解析。
• 在 src 目录里面正常能使用<script setup lang="ts">并在里面导入 ts 类型的组件。

接下来主要解决找不到类型声明的问题。

原因

找不到类型声明主要是是因为 tsconfig.json 中 作用域的问题，默认情况下 tsconfig.json 的作用域是 src 目录下，而 docs 不在 src 目录下，所以报错。

解决方法主要有两种：

方法一：（推荐做法）

修改 tsconfig.json 的 include 配置：新增 docs 目录下的.vue 文件："docs/**/*"和"docs/**/*.vue"。让 ts-plugin 识别到 docs 目录下的 .vue 文件。 注意：有些项目include 配置是在 tsconfig.app.json里面，然后再把tsconfig.app.json导入到tsconfig.json，总之你就在这几个tsconfig找到include 配置,然后修改就行了。具体做法：

"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "docs/**/*", "docs/**/*.vue"],

方法二：

就是把所有的 docs 目录里面的.vue 文件导出的组件类型都设置为 any，由于我们只是用文档展示而已，很少在 docs 里面做组件之间的逻辑处理，设置为 any，也可以接受。具体做法：在 docs 目录下新建一个子文件 env.d.ts，里面写入：

/// <reference types="vite/client" />
declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const vueComponent: DefineComponent<{}, {}, any>;
  export default vueComponent;
}

总结

本文主要解决 VitePress 在 docs 中 vue 文件导入的 ts 类型的组件报错：找不到相关模块或者类型声明。主要方法就是扩大 ts 配置作用域（推荐），或者把组件类型设置为 any。有收获的话可以点个赞哟，更多 VitePress 使用时遇到的问题，见我的另一篇博客。

在项目中使用 VitePress 作为文档常见问题：样式丢失，图标丢失，打包错误，中文配置修改等