vite+vue3+ts項目中提示無法找到模塊的問題及解決

更新時間：2024年08月16日 10:18:53 作者：要來一杯多娜茶嗎？

這篇文章主要介紹了vite+vue3+ts項目中提示無法找到模塊的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vite+vue3+ts項目中提示無法找到模塊

在開發(fā)過程中碰到了導(dǎo)入模塊時提示無法找到模塊這個問題，分享一下我的解決思路

首先產(chǎn)生這個錯誤是：無法找到模塊XXX，并且提示'XXX' is declared but its value is never read

產(chǎn)生這個問題的原因是我們使用了ts語法，他只能識別.ts文件，并不能識別.vue文件，所以在引入組件的時候報錯了

注意：

這個錯誤并不影響代碼的正常運行，只是在編寫代碼時，import xxx from 'xxx'會一直飄紅，很影響觀感

這里提供一種解決方案

1.在項目的根目錄下創(chuàng)建一個xxx.d.ts文件，文件名自定義即可，后綴必須是.d.ts

2.在剛剛創(chuàng)建的文件中輸入一下代碼

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
  }

保存代碼，并且重啟項目，這樣令人不悅的紅色就會消失啦

vue3+ts報錯:Cannot find module‘@/views/xxx.vue‘ or its corresponding type declarations

在Vue的TypeScript項目中，使用const test = () => import('@/views/login')語法動態(tài)導(dǎo)入模塊時，可能會出現(xiàn)類型聲明文件找不到的錯誤。

這是由于TypeScript無法正確解析動態(tài)導(dǎo)入的路徑而導(dǎo)致的。

盡管你在項目中沒有遇到問題，但TypeScript的類型檢查器仍然會發(fā)出警告或錯誤，因為它無法找到相應(yīng)的類型聲明文件。

解決這個問題

你可以在Vue項目的根目錄下創(chuàng)建一個env.d.ts（或者其他任何你喜歡的名稱）的文件，并在其中添加以下內(nèi)容：

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

在tsconfig.json 里引入env.d.ts

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "./global.d.ts",
    "./env.d.ts"
  ],

重啟項目即可~