TaoToken 配置 TypeScript 项目：解决找不到模块“./App.vue”或其相应的类型声明 ts(2307)

1. 先搞清楚 ts(2307) 到底在报什么你在 Vue3 TypeScript Vite 项目里敲下import App from ./App.vue编辑器立刻飘红找不到模块“./App.vue”或其相应的类型声明。ts(2307)。这个报错的意思是 TypeScript 编译器不认识.vue后缀的文件它只认.ts、.tsx、.d.ts这些标准类型文件遇到.vue就当成未知模块处理于是抛出 2307。这个错误本身不影响 Vite 打包运行因为 Vite 有自己的插件体系处理.vue文件但 TS 类型检查、编辑器智能提示、vue-tsc构建都会因此失败。适合谁看刚搭 Vue3 TS 项目的新手、从 JS 项目迁移到 TS 的开发者、以及 CI 里vue-tsc --noEmit报一堆 2307 的同学。我试过在一个干净项目里复现只要缺少类型声明文件App.vue、HelloWorld.vue、路由懒加载的import(.../Xxx.vue)全部报 2307。修复思路分两层一是让编辑器/TS 服务认识.vue模块二是让tsconfig.json的 include 范围覆盖到声明文件。下面按可复制的顺序走一遍。2. TaoToken 前置把模型对话和编码能力接进来排查这类类型报错时我习惯把报错原文、tsconfig.json、shims-vue.d.ts一起丢给模型做交叉验证比单纯搜答案快。TaoToken 在这里的作用是提供一个统一的模型调用入口你可以在模型对话里贴报错也可以在 Coding Plan 里让模型直接读项目结构给修复建议。需要先拿到 API Key入口在控制台的 API Keys 页面https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。创建后复制保存后面配置环境变量用。如果你只是想先验证模型能不能理解 ts(2307) 这类问题可以直接用模型对话https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。长期在编辑器里做编码辅助、Agent 自动改代码则看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 API 基址是 https://taotoken.net/api 注意这个地址不带任何查询参数。配置时把 Key 放进环境变量别硬编码进仓库。3. 可复制配置shims-vue.d.ts 与 tsconfig.json 骨架3.1 创建 shims-vue.d.ts在项目src目录或根目录新建shims-vue.d.ts有的模板叫env.d.ts名字不影响关键是内容被 include 到。内容如下/// reference typesvite/client / declare module *.vue { import type { DefineComponent } from vue const vueComponent: DefineComponent{}, {}, any export default vueComponent }第一行引入 Vite 的客户端类型让import.meta.env等有提示下面这段是核心告诉 TS 所有.vue文件默认导出一个 Vue 组件。DefineComponent{}, {}, any里的三个泛型分别对应 Props、Setup 返回、Data用any是为了兼容性实际项目里可以按需收紧。3.2 配置 tsconfig.json确保include覆盖到声明文件同时compilerOptions里打开必要选项。一个可用的骨架{ compilerOptions: { target: ESNext, module: ESNext, moduleResolution: Bundler, strict: true, jsx: preserve, resolveJsonModule: true, isolatedModules: true, esModuleInterop: true, lib: [ESNext, DOM, DOM.Iterable], skipLibCheck: true, noEmit: true, types: [vite/client] }, include: [ src/**/*.ts, src/**/*.d.ts, src/**/*.tsx, src/**/*.vue, shims-vue.d.ts ], exclude: [node_modules, dist] }关键点include里必须出现*.d.ts和shims-vue.d.ts否则声明文件不生效moduleResolution用Bundler适配 Vitetypes里加vite/client让 Vite 类型全局可用。如果你的项目是 monorepo注意include路径要相对当前 tsconfig 所在目录。3.3 编辑器插件确认VSCode 里安装 Vue 官方插件Vue - Official它替代了旧的 Volar 和 TypeScript Vue Plugin。装完后在.vue文件里右键选择「Select TypeScript Version」确保用的是工作区 TS 版本而不是 VSCode 内置版本版本不一致也会导致声明不生效。4. 验证请求让 ts(2307) 消失的具体动作配置改完不会自动生效需要重启 TS 服务。在 VSCode 里按CtrlShiftPMac 是CmdShiftP输入TypeScript: Restart TS Server回车。这一步会重新加载 tsconfig 和声明文件。然后打开App.vue或main.ts看import App from ./App.vue的红线是否消失。如果还在把鼠标悬停在./App.vue上看提示是「找不到模块」还是别的。命令行验证更直接npx vue-tsc --noEmit如果之前报一堆 2307现在应该只剩真实的类型错误或零输出。想确认模型侧也能识别可以把报错和修复后的 tsconfig 贴到模型对话里让它判断是否还有遗漏的 include 路径。实测下来90% 的 2307 都是声明文件缺失或 include 没覆盖导致的。5. 本篇常见错排查5.1 声明文件写了但 include 没加最常见。文件叫shims-vue.d.ts放在根目录但tsconfig.json的include只写了src/**/*根目录文件被漏掉。解决把shims-vue.d.ts加进 include或把它移到src下。5.2 多个 tsconfig 互相覆盖Vue 模板常拆成tsconfig.json、tsconfig.app.json、tsconfig.node.json。如果你只改了根tsconfig.json但实际生效的是tsconfig.app.json声明文件不会加载。检查tsconfig.json里的references和extends确认最终生效的那份 include 了声明文件。5.3 插件版本冲突同时装了旧版 Volar 和 Vue - Official两者抢 TS 服务。卸载旧插件只留 Vue - Official然后重启 TS 服务。5.4 路径别名导致解析失败用了/别名但tsconfig.json没配pathsTS 解析不到模块也会报 2307。补上baseUrl: ., paths: { /*: [src/*] }同时确认vite.config.ts里的resolve.alias和 tsconfig 的 paths 一致。5.5 缓存没清改完配置后 TS 服务有缓存重启 TS 服务仍不行就关掉 VSCode 重开或删掉node_modules/.vite缓存目录再试。6. 把修复流程固化到你的工作流类型声明这类问题修一次就该沉淀成模板。建议把shims-vue.d.ts和 tsconfig 骨架放进项目脚手架新项目直接复用。遇到新的 2307 变体比如import(./views/Home.vue)动态导入报错排查路径是一样的先看声明文件在不在再看 include 覆盖没有最后重启 TS 服务。需要长期在编辑器里做类型修复和代码生成可以用 Coding Plan 把模型接进工作流https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。接入细节看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 Key 管理在 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。API 基址 https://taotoken.net/api 不带参数配置时注意区分。