vite+vue3+ts項(xiàng)目中提示無(wú)法找到模塊的問(wèn)題及解決

更新時(shí)間：2024年08月16日 10:18:53 作者：要來(lái)一杯多娜茶嗎？

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

vite+vue3+ts項(xiàng)目中提示無(wú)法找到模塊

在開(kāi)發(fā)過(guò)程中碰到了導(dǎo)入模塊時(shí)提示無(wú)法找到模塊這個(gè)問(wèn)題，分享一下我的解決思路

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

產(chǎn)生這個(gè)問(wèn)題的原因是我們使用了ts語(yǔ)法，他只能識(shí)別.ts文件，并不能識(shí)別.vue文件，所以在引入組件的時(shí)候報(bào)錯(cuò)了

注意：

這個(gè)錯(cuò)誤并不影響代碼的正常運(yùn)行，只是在編寫代碼時(shí)，import xxx from 'xxx'會(huì)一直飄紅，很影響觀感

這里提供一種解決方案

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

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

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

保存代碼，并且重啟項(xiàng)目，這樣令人不悅的紅色就會(huì)消失啦

vue3+ts報(bào)錯(cuò):Cannot find module‘@/views/xxx.vue‘ or its corresponding type declarations

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

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

盡管你在項(xiàng)目中沒(méi)有遇到問(wèn)題，但TypeScript的類型檢查器仍然會(huì)發(fā)出警告或錯(cuò)誤，因?yàn)樗鼰o(wú)法找到相應(yīng)的類型聲明文件。

解決這個(gè)問(wèn)題

你可以在Vue項(xiàng)目的根目錄下創(chuàng)建一個(gè)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"
  ],

重啟項(xiàng)目即可~