Vue3+TypeScript项目报错：找不到模块声明文件

1. 添加Vue组件类型声明文件 #

在项目根目录创建或检查是否存在shims-vue.d.ts文件，写入以下内容：

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

这个文件用于告诉TypeScript如何识别.vue后缀的模块，是解决此类报错的核心配置。

2. 校验tsconfig.json配置 #

打开项目根目录的tsconfig.json，确认以下关键配置：

• include数组需覆盖源码目录和声明文件，确保TypeScript能扫描到相关文件：

  "include": [
    "src/**/*",
    "shims-vue.d.ts"
  ]
  

• compilerOptions中moduleResolution设置为node，保证模块解析符合Node.js规则：

  "compilerOptions": {
    "moduleResolution": "node",
    // 其他原有配置...
  }
  

3. 规范组件的script标签 #

确保组件的<script>标签明确指定lang="ts"，即使无业务逻辑也需声明类型语言：

<template>
  <div>
    <h1>Inventory</h1>
  </div>
</template>

<script setup lang="ts">
// 可在此添加TS相关代码
</script>

4. 重置依赖与缓存 #

若以上步骤无效，尝试清理依赖并重新安装：

rm -rf node_modules package-lock.json
npm install

同时清除TypeScript缓存：

npx tsc --clearCache

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