Vue3+TS项目报TS2307：无法找到.vue模块或对应类型声明

报错根因 #

TypeScript默认仅识别.ts/.tsx后缀的模块，缺少Vue单文件组件的类型声明，同时现有tsconfig配置存在遗漏，导致ts-loader在类型检查阶段无法解析.vue后缀的导入语句。代码能正常编译运行是因为vue-loader本身可以处理.vue文件，但TS类型检查阶段会抛出错误。

分步解决 #

• 补充Vue单文件组件全局类型声明
  在项目根目录（与tsconfig.json同级）新建shims-vue.d.ts文件，写入以下代码：

  declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
    export default component
  }
  

  该声明的作用是告知TypeScript，所有.vue后缀文件导出的内容为合法Vue组件类型。

• 修正tsconfig.json配置
  现有配置存在两处问题：一是include规则未覆盖类型声明文件与Vue单文件组件；二是缺少模块解析相关的必要配置，参考如下配置修改：

  {
    "compilerOptions": {
      "module": "ESNext",
      "target": "ES2015",
      "sourceMap": true,
      "moduleResolution": "node",
      "esModuleInterop": true,
      "lib": [
        "DOM",
        "ES2015",
        "ES2016",
        "ES2017"
      ]
    },
    "exclude": [
      "node_modules"
    ],
    "include": [
      "assets/**/*.ts",
      "assets/**/*.d.ts",
      "assets/**/*.vue"
    ]
  }
  

  注意：Vue3项目不要使用commonjs作为module规则，会导致模块解析异常。

• 校验依赖版本与loader配置
  你当前webpack配置中ts-loader的appendTsSuffixTo: [/\.vue$/]配置是正确的，无需调整。需要确认本地安装的vue-loader版本为16.x（匹配Vue3主版本），版本不符时执行以下命令安装正确版本：

  npm install vue-loader@16 -D
  

• 清理缓存重启服务
  所有配置修改完成后，终止当前运行的watch进程，删除项目下node_modules/.cache缓存目录，重新执行npm run watch即可消除报错。

内容的提问来源于stack exchange，提问作者Young L.