Vue3+TypeScript项目执行tsc编译时出现TS2307模块找不到错误

1. 修复.vue文件的类型声明缺失问题 #

TypeScript本身不识别.vue文件后缀，需手动添加类型声明：

• 在项目根目录创建shims-vue.d.ts文件（已有则直接编辑），写入以下内容：

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

• 确保该文件被tsconfig.json的include字段覆盖，示例配置：

{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

2. 同步Vite路径别名与TypeScript配置 #

路径别名在Vite中生效但tsc不识别，核心是TS配置未同步别名规则：

• 先确认vite.config.ts中的别名配置（以@和@pages为例）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@pages': path.resolve(__dirname, './src/pages')
    }
  }
})

• 在tsconfig.json的compilerOptions中添加baseUrl和paths，与Vite别名完全对应：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@pages/*": ["src/pages/*"]
    },
    // 保留其他原有配置
  }
}

• 若使用@vue/tsconfig这类预设配置，需在extends后覆盖paths字段，确保TS优先读取自定义别名。

3. 验证与排查剩余问题 #

• 重新运行npm run ts（即tsc），检查错误是否消除。
• 若仍报错，排查以下点：
  • tsconfig.json的include是否覆盖了所有需要编译的文件
  • 别名路径与实际文件目录是否完全匹配（注意大小写，TS在部分系统下路径大小写敏感）
  • 安装@types/node处理path模块类型（可选但推荐）：npm install @types/node --save-dev

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