1. 先别急着改代码TS2614 到底在报什么如果你正在用 Vue3 TypeScript 写项目某天在.ts文件里写了这么一行import type { IProps } from /components/MyCard.vue然后编辑器立刻飘红提示TS2614: Module *.vue has no exported member IProps别慌这不是你代码写错了而是 TypeScript 根本不认识.vue文件里导出的类型。这个报错的本质是TypeScript 编译器只认.ts、.tsx、.d.ts这些后缀.vue对它来说是个陌生格式。你在script setup langts里写的export interface IProps在 TS 眼里压根不存在所以它才会说“这个模块没有导出成员”。有意思的是在另一个.vue文件里导入同样的接口却不报错因为 Vue 的语言服务插件会接管.vue之间的类型推导但一旦跨到纯.ts文件插件和 TS 编译器之间的边界就暴露了。这个问题在 Vue3.2 TypeScript 4.x 的组合里特别常见尤其是你从 WebStorm 换到 VS Code或者团队里有人用 Volar 有人用 Vetur 的时候。我试过把接口挪到单独的.ts文件里确实能绕过但项目结构会变得很别扭——组件自己的 Props 类型为什么要放到外面去所以更合理的做法是从 tsconfig、类型声明文件和编辑器插件配置三个层面一起排查让 TS 真正“看见”.vue里的导出。这篇就按这个思路走先讲清楚 TS2614 的触发条件再给出 VS Code 里可复制的settings.json骨架最后用实际请求验证配置是否生效。如果你在团队里统一用 TaoToken 管理模型调用的 Key这套配置同样适用于那些需要读取.vue类型定义的 AI 辅助编码场景。2. 为什么需要 TaoToken 统一 Key 来配合排查排查 TS2614 这类类型问题很多时候不是一个人闷头看代码就能搞定的。你可能需要让 AI 辅助工具帮你分析 tsconfig 的继承链、对比不同插件版本的行为差异或者直接问“为什么 Volar 在.ts文件里读不到.vue的导出”。这些操作背后都要调用大模型而每个工具单独配 Key、单独计费排查到一半 Key 额度用完了思路就断了。TaoToken 在这里的角色是用一个统一 Key 覆盖多个模型调用入口包括模型对话、Coding Plan 和 API 调用。你不需要在 VS Code 插件、命令行工具和网页对话之间反复切换账号排查过程中随时可以换个模型问同一个问题。官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址不带 UTM 参数配置的时候别多复制了。具体到 TS2614 这个场景你可以这样用先在模型对话里让 AI 帮你读一段 tsconfig.json确认include和types字段有没有漏掉.vue声明文件然后切到 Coding Plan 让 AI 直接在你的项目里生成shims-vue.d.ts的补全版本最后用 API 写个小脚本批量检查所有.vue文件的导出类型是否被正确引用。整个过程共用一个 Key不用来回换。需要先拿 Key 的话走这个入口https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。拿到之后先别急着配到所有工具里下面会给出 VS Code 的settings.json骨架把 Key 和插件配置放在一起管理。3. 可复制的 settings.json 骨架与 tsconfig 配置3.1 先确认 tsconfig.json 的 include 范围很多 TS2614 的根源不在插件而在 tsconfig 压根没把.vue文件纳入编译范围。打开项目根目录的tsconfig.json检查include字段{ compilerOptions: { target: ES2020, module: ESNext, moduleResolution: Bundler, strict: true, jsx: preserve, types: [vite/client], skipLibCheck: true, allowImportingTsExtensions: true, noEmit: true }, include: [ src/**/*.ts, src/**/*.d.ts, src/**/*.tsx, src/**/*.vue ], exclude: [node_modules, dist] }关键点是include里必须有src/**/*.vue。如果你用的是 Vite 创建的项目默认模板可能只写了src/**/*.ts漏掉.vue就会导致 TS 编译器完全不处理这些文件自然也就找不到里面的导出成员。改完之后重启 VS Code 的 TS 服务按CtrlShiftPMac 是CmdShiftP输入TypeScript: Restart TS Server执行。3.2 shims-vue.d.ts 要写对不能只声明模块项目src目录下通常有个shims-vue.d.ts默认内容是这样的declare module *.vue { import type { DefineComponent } from vue const component: DefineComponent{}, {}, any export default component }这个声明只告诉 TS“.vue文件默认导出一个组件”但没有处理命名导出。你在script setup里写的export interface IProps属于命名导出TS 依然看不到。要解决 TS2614需要把声明改成能透传类型的形式。比较稳妥的做法是配合vue-tsc使用并在shims-vue.d.ts里补充declare module *.vue { import type { DefineComponent } from vue const component: DefineComponent{}, {}, any export default component export type { DefineComponent } }但更推荐的方式是直接依赖 Volar 的类型推导而不是手动补声明。Volar 会为每个.vue文件生成虚拟的.ts文件TS 编译器通过这个虚拟文件就能读到命名导出。前提是 VS Code 里装的是 Volar 而不是 Vetur并且settings.json里没有禁用 Volar 的 takeover 模式。3.3 VS Code settings.json 骨架下面这份配置可以直接复制到项目的.vscode/settings.json里也可以放到用户级设置中。重点是启用 Volar 的 takeover 模式并确保 TS 插件走的是 Volar 提供的版本{ vue.server.hybridMode: true, vue.server.includeLanguages: [vue, typescript, javascript], typescript.tsdk: node_modules/typescript/lib, typescript.enablePromptUseWorkspaceTsdk: true, volar.takeOverMode.enabled: true, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, files.associations: { *.vue: vue }, typescript.preferences.importModuleSpecifier: non-relative, typescript.updateImportsOnFileMove.enabled: always }逐项说明一下。vue.server.hybridMode让 Volar 同时处理 Vue 和 TS 的语言服务避免两套服务打架。typescript.tsdk指向项目本地的 TypeScript 版本而不是 VS Code 内置的版本这样能保证vue-tsc和编辑器用的是同一个 TS。volar.takeOverMode.enabled是关键开启后 Volar 会接管.ts文件里的 Vue 类型推导TS2614 在跨文件导入时就不会再出现。如果你在团队里用 TaoToken 的 Coding Plan 做长期编码可以把 Key 也放在这个文件里通过环境变量引用{ terminal.integrated.env.linux: { TAOTOKEN_API_KEY: ${env:TAOTOKEN_API_KEY} } }这样在 VS Code 集成终端里跑vue-tsc --noEmit或者调用 API 时Key 会自动注入不用每次手动 export。3.4 插件版本与依赖对齐配置写对了插件版本不对照样报错。检查package.json里的这几个依赖{ devDependencies: { vue: ^3.4.0, typescript: ^5.4.0, vue-tsc: ^2.0.0, volar/typescript: ^2.0.0, vue/language-server: ^2.0.0 } }Vue3.2 配 TypeScript 4.1 是当年 TS2614 的高发组合现在建议至少升到 Vue3.4 TS5.4。升级后执行npm install然后重启 VS Code。如果项目里还留着 Vetur务必禁用Vetur 和 Volar 同时开启会导致.vue文件的类型服务被抢占TS2614 会反复出现。4. 验证请求与成功结果配置改完之后怎么确认 TS2614 真的解决了不要只看编辑器还红不红要用命令行跑一遍类型检查因为编辑器的语言服务有缓存可能显示滞后。在项目根目录执行npx vue-tsc --noEmit --pretty如果配置正确输出应该是空的或者只有其他无关的类型警告不会再有TS2614。如果还有报错加上--verbose看它实际编译了哪些文件npx vue-tsc --noEmit --listFiles | grep .vue正常情况下列表里会出现你项目里的.vue文件路径说明 TS 已经把它们纳入了编译范围。如果.vue文件一个都没出现回到第 3.1 节检查include。再做一个跨文件导入的验证。新建一个src/types/test-import.tsimport type { IProps } from /components/MyCard.vue const props: IProps { description: TS2614 test } console.log(props.description)然后在MyCard.vue里确保有对应的导出script setup langts export interface IProps { description: string } definePropsIProps() /script template div{{ description }}/div /template保存后看test-import.ts里还有没有红线。如果没有说明 Volar 的 takeover 模式生效了TS 编译器通过虚拟文件读到了.vue的命名导出。这时候你可以用 TaoToken 的模型对话入口让 AI 再检查一遍这个导入链路https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 把两个文件的内容贴进去问它“这个导入在 TS5.4 Volar2.0 下是否合法”确认没有遗漏的边界情况。命令行验证通过后再回到 VS Code 里按CtrlShiftP执行TypeScript: Restart TS Server让编辑器重新加载配置。这时候之前飘红的地方应该全部消失。5. 本篇常见错排查5.1 改了 tsconfig 但没重启 TS Server这是最常见的坑。tsconfig.json的修改不会自动触发 TS 语言服务重新读取必须手动执行TypeScript: Restart TS Server。如果你用的是 WebStorm对应操作是File Invalidate Caches / Restart。不重启的话编辑器用的还是旧的编译上下文TS2614 会一直挂着。5.2 Volar 和 Vetur 同时启用VS Code 扩展面板里搜Vue如果同时看到Vue - OfficialVolar和Vetur把 Vetur 禁用掉。两个插件都会注册.vue文件的语言服务Vetur 不认识script setup的命名导出会覆盖 Volar 的推导结果导致 TS2614 在.ts文件里反复出现。禁用 Vetur 后重启 VS Code。5.3 typescript.tsdk 指向了 VS Code 内置版本settings.json里如果没写typescript.tsdkVS Code 默认用自己内置的 TypeScript 版本可能和你项目node_modules里的版本不一致。vue-tsc用的是项目本地版本编辑器用的是内置版本两边行为不同就会出现“命令行不报错但编辑器报错”的情况。加上typescript.tsdk: node_modules/typescript/lib并在 VS Code 右下角点击 TS 版本号选择Use Workspace Version。5.4 接口定义在script setup里但没加 exportscript setup里的顶层绑定默认是暴露给模板的但不会自动成为模块的命名导出。如果你写的是interface IProps { description: string }没有export关键字那 TS 当然找不到IProps这个导出成员。改成export interface IProps即可。注意export必须写在interface前面不能写成interface export IProps。5.5 路径别名 没有在 tsconfig 里配置import type { IProps } from /components/MyCard.vue里的是路径别名如果tsconfig.json的compilerOptions.paths里没有配{ compilerOptions: { baseUrl: ., paths: { /*: [src/*] } } }TS 会先报“找不到模块”然后才报 TS2614。两个错误叠在一起容易看花眼。先把paths配好确保模块能解析到再看导出成员的问题。5.6 vue-tsc 版本和 Vue 版本不匹配Vue3.2 配vue-tsc0.xVue3.4 配vue-tsc2.x。版本错配会导致虚拟文件生成规则不一致.vue的命名导出在虚拟文件里丢失。检查package.json里vue和vue-tsc的主版本号是否对应不对应就升级。升级后删掉node_modules和package-lock.json重新npm install。6. 把配置固化下来下次直接复用TS2614 这个问题说到底就是 TS 编译器、Volar 语言服务和.vue文件三者之间的边界没对齐。你只要把tsconfig.json的include补上.vue把settings.json里的 Volar takeover 模式打开再确保typescript.tsdk指向项目本地版本这个问题就不会再反复出现。建议把这份settings.json骨架提交到项目的.vscode目录里团队里每个人拉下来就是统一配置不用再各自排查。如果你用 TaoToken 的 Coding Plan 做长期编码可以把 API Key 通过环境变量注入配合vue-tsc --noEmit写进 CI 流程每次提交前自动跑一遍类型检查TS2614 这类问题在合并前就能拦住。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 里面有环境变量配置和 API 调用的完整示例照着改一下就能用。