typescript - VSCode 顯示「找不到模組」TS 錯誤，對於 .vue 導入在編譯時不會發生

簡單來說，vscode 在一個模組中顯示這個錯誤：

無法找到模塊 '@/components/SidebarToggleIcon'

但是在編譯期間並沒有出現這樣的錯誤。

這是一個 VueJS 專案，SidebarToggleIcon 是一個 .vue 檔案，在 <script lang="ts"> 區塊中使用 TypeScript。這個錯誤以前會在 VSCode 中出現，也會在編譯過程中出現，直到我加入了 @vue/eslint-config-typescript 套件。現在它只會在 VSCode 中顯示。

Sidebar.vue

<script lang="ts">
// [skip other imports]
import SidebarToggleIcon from '@/components/SidebarToggleIcon';

@Component
export default class LayoutSidebar extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }
}

</script>

SidebarToggleIcon.vue

<script lang="ts">
import Vue from 'vue';
import { getModule } from 'vuex-module-decorators';
import Component from "vue-class-component";
import PreferencesStore from '@/store/PreferencesStore';

const preferenceModule: PreferencesStore = getModule(PreferencesStore);

@Component
export default class SidebarToggleIcon extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }

    toggle(){
        preferenceModule.ToggleSidebar();
    }
}
</script>

這是為什麼？我該如何解決這個問題？

編輯：這不是 @ 別名的問題，那些別名解析是正確的（在截圖中錯誤上方的那一行使用了它，而且我在項目其他地方也使用了它），即使使用相對路徑這個錯誤仍然會出現。我的 TSConfig 有相應的 "paths": { "@/*": ["src/*"] } 項目。如果這是問題，編譯也會拋出這個錯誤，但實際上沒有，這只是在 VSCode 中出現。

答案＃1

對我來說，對於在 PhpStorm 中的 Vite & Vue 3 專案，僅在 src 目錄中建立一個 shims 檔案就足夠了。我的大多數元件僅使用 script setup。

src/shims-vue.d.ts

declare module '*.vue';

答案＃2

我已經安裝了 TypeScript Vue 插件 (Volar) VS Code 擴充功能，問題已經解決。

請記得停用這個 VS Code 內建擴充功能：TypeScript 和 JavaScript 語言功能。你可以在這裡閱讀更多資訊。

在你的專案工作區中，使用 Ctrl+Shift+P（macOS：⌘+Shift+P）呼叫命令面板。
輸入 built 並選擇「擴充功能：顯示內建擴充功能」。在擴充功能搜尋框中輸入 typescript（不要移除 @builtin 前綴）。

點擊「TypeScript 和 JavaScript 語言功能」的小齒輪圖標，然後選擇「停用（工作區）」。
重新加載工作區。當您打開 Vue 或 TS 文件時，接管模式將會啟用。
（可選） 如果你已經為 webpack 或 vite（或其他模組打包工具）設定了自訂路徑別名，請記得為 TypeScript 支援新增路徑別名

tsconfig.json

{
  "compilerOptions": {
    /* other configs */
    "paths": {
      "@/*": [
        "./src/*" // set path `@/*` as alias of `src/*`
      ]
    },
    /* other configs */
  }
}

答案＃3

這是因為 TypeScript 不會自動解析 webpack 別名。

要讓 TS 解析別名，應該將它們添加到 tsconfig.json 的 compilerOptions.paths 中：

{  
  "compilerOptions": {
   "paths": {
     "@/*": [
      "./*"
     ]
    }
  }
}

在這些更改後重新載入你的 IDE

答案＃4

在 Sidebar.vue 文件中，嘗試在導入聲明中添加「.vue」擴展名，類似這樣：

import SidebarToggleIcon from '@/components/SidebarToggleIcon.vue';

答案＃5

在我的電腦上，VS Code 擴充套件 Vetur 對於我在多專案倉庫中的 <script lang="ts"> Vue 元件中使用的 @/ 匯入會產生錯誤訊息。

看起來 Vetur 會在 VS Code 工作區的頂層資料夾中尋找 tsconfig.json。我的 Vue 應用程式及其 tsconfig.json 位於子資料夾中。當調用 TypeScript 編譯器時，Vetur 不會傳遞正確的設定。

方案 1（臨時應急措施）

從 Vue 專案的根目錄啟動 VS Code。（與正確的 tsconfig.json 位於同一資料夾。）

code .

確保 tsconfig.json 包含 compilerOptions.baseUrl 屬性，除此之外還有 compilerOptions.paths 屬性（Vetur FAQ）。

這會更改我的 VS Code 設定和擴充功能設定；因為專案層級的 .vscode 資料夾不再可存取。（我使用符號連結來保持工作區層級和 Vue 層級的 .vscode 資料夾同步。）

解決方案 2（技巧）

我的工作區中只有一個 Vue 專案，所以我在整個工作區資料夾（我的 Vue 應用程式資料夾的上層資料夾）中添加了一個修改過的 tsconfig.json 文件。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["myVue/src/*"]
    }
  },
  "exclude": ["node_modules"]
}

我除了需要 "baseUrl" 屬性之外，還需要 "paths" 屬性（再次參考 Vetur FAQ）。

我重新載入了 VS Code，以使更改生效。

"exclude" 屬性可能不是必需的，但我對 Vetur 調用 TypeScript 編譯器在 node_modules 資料夾上浪費時間感到偏執。

背景

這可能與當前開啟的 Vetur 問題多根支持 #424 有關。（摘要：Vetur 期望在 VS Code 工作區頂層文件夾中正好有一個 SPA。）

答案＃6

在匯入時添加了 .vue 擴展名後，我通過為 vue 文件添加 TypeScript 援助文件解決了這個錯誤。

我在 typings/sfc.d.ts 中創建了一個文件，內容如下：

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

參考資料：https://github.com/vuejs/vue/issues/5298#issuecomment-453036640

答案＃7

有點晚，但請確保在 VSCode 中使用工作區版本的 TS，以便加載本地 TS 插件。參考這個評論：https://github.com/vitejs/vite/issues/965#issuecomment-717248892

在 VSCode 中，您可以選擇您的工作區 TS 版本：