vite+vue3+ts項(xiàng)目中提示無(wú)法找到模塊的問(wèn)題及解決
vite+vue3+ts項(xiàng)目中提示無(wú)法找到模塊
在開發(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)目即可~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實(shí)現(xiàn)分頁(yè)功能
這篇文章主要介紹了Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實(shí)現(xiàn)分頁(yè)功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01
vue3配置router路由并實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能
這篇文章主要介紹了vue3配置router路由并實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
vue之elementUi的el-select同時(shí)獲取value和label的三種方式
這篇文章主要介紹了vue之elementUi的el-select同時(shí)獲取value和label的三種方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02
web前端vue之vuex單獨(dú)一文件使用方式實(shí)例詳解
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了web前端vue:vuex單獨(dú)一文件使用方式,需要的朋友可以參考下2018-01-01
Vue.js + Nuxt.js 項(xiàng)目中使用 Vee-validate 表單校驗(yàn)
vee-validate 是為 Vue.js 量身打造的表單校驗(yàn)框架,允許您校驗(yàn)輸入的內(nèi)容并顯示對(duì)應(yīng)的錯(cuò)誤提示信息。這篇文章給大家?guī)?lái)了Vue.js 使用 Vee-validate 實(shí)現(xiàn)表單校驗(yàn)的相關(guān)知識(shí),感興趣的朋友一起看看吧2019-04-04
Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁(yè)面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實(shí)現(xiàn) 點(diǎn)擊顯示 再點(diǎn)擊隱藏 點(diǎn)擊頁(yè)面空白區(qū)域也隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01

