)
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 的開發(fā)者、以及 CI 里vue-tsc --noEmit報一堆 2307 的同學。我試過在一個干凈項目里復現(xiàn)只要缺少類型聲明文件App.vue、HelloWorld.vue、路由懶加載的import(.../Xxx.vue)全部報 2307。修復思路分兩層一是讓編輯器/TS 服務認識.vue模塊二是讓tsconfig.json的 include 范圍覆蓋到聲明文件。下面按可復制的順序走一遍。2. TaoToken 前置把模型對話和編碼能力接進來排查這類類型報錯時我習慣把報錯原文、tsconfig.json、shims-vue.d.ts一起丟給模型做交叉驗證比單純搜答案快。TaoToken 在這里的作用是提供一個統(tǒng)一的模型調用入口你可以在模型對話里貼報錯也可以在 Coding Plan 里讓模型直接讀項目結構給修復建議。需要先拿到 API Key入口在控制臺的 API Keys 頁面https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。創(chuàng)建后復制保存后面配置環(huán)境變量用。如果你只是想先驗證模型能不能理解 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 注意這個地址不帶任何查詢參數(shù)。配置時把 Key 放進環(huán)境變量別硬編碼進倉庫。3. 可復制配置shims-vue.d.ts 與 tsconfig.json 骨架3.1 創(chuàng)建 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里必須出現(xiàn)*.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」確保用的是工作區(qū) 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現(xiàn)在應該只剩真實的類型錯誤或零輸出。想確認模型側也能識別可以把報錯和修復后的 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)動態(tài)導入報錯排查路徑是一樣的先看聲明文件在不在再看 include 覆蓋沒有最后重啟 TS 服務。需要長期在編輯器里做類型修復和代碼生成可以用 Coding Plan 把模型接進工作流https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。接入細節(jié)看文檔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 不帶參數(shù)配置時注意區(qū)分。 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 的開發(fā)者、以及 CI 里vue-tsc --noEmit報一堆 2307 的同學。我試過在一個干凈項目里復現(xiàn)只要缺少類型聲明文件App.vue、HelloWorld.vue、路由懶加載的import(.../Xxx.vue)全部報 2307。修復思路分兩層一是讓編輯器/TS 服務認識.vue模塊二是讓tsconfig.json的 include 范圍覆蓋到聲明文件。下面按可復制的順序走一遍。2. TaoToken 前置把模型對話和編碼能力接進來排查這類類型報錯時我習慣把報錯原文、tsconfig.json、shims-vue.d.ts一起丟給模型做交叉驗證比單純搜答案快。TaoToken 在這里的作用是提供一個統(tǒng)一的模型調用入口你可以在模型對話里貼報錯也可以在 Coding Plan 里讓模型直接讀項目結構給修復建議。需要先拿到 API Key入口在控制臺的 API Keys 頁面https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。創(chuàng)建后復制保存后面配置環(huán)境變量用。如果你只是想先驗證模型能不能理解 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 注意這個地址不帶任何查詢參數(shù)。配置時把 Key 放進環(huán)境變量別硬編碼進倉庫。3. 可復制配置shims-vue.d.ts 與 tsconfig.json 骨架3.1 創(chuàng)建 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里必須出現(xiàn)*.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」確保用的是工作區(qū) 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現(xiàn)在應該只剩真實的類型錯誤或零輸出。想確認模型側也能識別可以把報錯和修復后的 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)動態(tài)導入報錯排查路徑是一樣的先看聲明文件在不在再看 include 覆蓋沒有最后重啟 TS 服務。需要長期在編輯器里做類型修復和代碼生成可以用 Coding Plan 把模型接進工作流https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentts2307 。接入細節(jié)看文檔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 不帶參數(shù)配置時注意區(qū)分。