VSCode 中，TS 提示 ”無法找到 *.vue 宣告檔案“ 的解決方案

在使用 VSCode 開發 Vue3 + TS 專案時，編輯器一直有一個報錯，因為不影響編譯和執行，所以就一直沒在意，但這兩天看著這紅槓提示實在是太彆扭，今天就來解決一下這個問題，還自己一個清爽的開發環境。

在網上查詢了很多資料，靠譜的不好找，但是功夫不負有心人，最終問題還是解決了，在這裡記錄一下，避免日後踩坑，也給有需要的朋友省點查詢資料的麻煩。

報錯資訊

具體的報錯資訊如下圖所示：

找不到 .vue 的宣告檔案，實際上就是 TS 無法識別 .vue 型別的檔案。

那麼就需要新增一下 .vue 型別檔案的宣告，步驟如下：

1. 在根目錄（也就是 tsconfig.json這一級）下新建名為 ”vue.d.ts“ 的檔案。檔名中的 ”vue“ 也可以改為任一名稱。

2. 在 ”vue.d.ts“ 檔案中寫入以下宣告：

    // 以下兩種方案二選一
   
    // 方案一
    declare module "*.vue" {
      import Vue from "vue";
      export default Vue;
    }
   
    // 方案二
    declare module '*.vue' {
      import { defineComponent } from 'vue'
      const Component: ReturnType<typeof defineComponent>
      export default Component
    }

3. 在 ”tsconfig.json“ 中，將第二步中建立的檔案 ”vue.d.ts“（或者你自己新建的其他名稱的 .d.ts 檔案）新增到 include 中：

    "include": [
       "vue.d.ts"
    ],

   我這邊完整的 include 屬性如下（我新建的是 ”app.d.ts“）：

   

結果

最後，我們來看一下 VSCode 中是否還有紅槓報錯：

報錯資訊沒有了，大功告成！

總結

一個清爽的開發環境有助於我們保持身心愉悅，自然而然也就提高了工作效率，沒有紅槓的程式碼看著果然舒服多了！

~

~本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！

知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

本作品採用《CC 協議》，轉載必須註明作者和本文連結