解決vue動(dòng)態(tài)加載組件import引入組件找不到組件(Error: Cannot find module)
使用場(chǎng)景
在一個(gè)項(xiàng)目中封裝了好多組件，根據(jù)接口返回不同類型值在頁(yè)面中動(dòng)態(tài)加載對(duì)應(yīng)的組件。
問(wèn)題描述
使用了動(dòng)態(tài)加載組件的方法，組件用 import() 引入時(shí)，直接寫成靜態(tài)路徑組件能找到，但是路徑里面使用了變量組件就找不到了，報(bào)錯(cuò) Error:Cannot find module
問(wèn)題原因
import() 語(yǔ)法是 ES6 中新引入的動(dòng)態(tài)加載模塊的語(yǔ)法，它可以在運(yùn)行時(shí)加載模塊，返回一個(gè) Promise 對(duì)象，可以用來(lái)加載不同的模塊。
所以import()語(yǔ)法本身是一個(gè)函數(shù)，其中可以傳入一個(gè)字符串，用來(lái)表示要加載的模塊的路徑，但是不能傳入變量，因?yàn)樽兞康闹翟谶\(yùn)行時(shí)可能會(huì)改變，而import()語(yǔ)法是在編譯時(shí)就已經(jīng)確定的，所以不能傳入變量。
解決方案
使用 webpack 的 require.ensure() 方法引入組件，它可以接受變量作為參數(shù)，并且可以返回 Promise 對(duì)象
return () => require.ensure([], (require) => require(`./components/${type}.vue`))
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?data中隨意改一個(gè)屬性,視圖都會(huì)更新嗎?
這篇文章主要討論Vue?data中隨意改一個(gè)屬性,視圖都會(huì)更新嗎?下面來(lái)自面試官的問(wèn)題然后做i出的一個(gè)問(wèn)題總結(jié)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2021-12-12
vue3組合式API獲取子組件屬性和方法的代碼實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue3組合式API獲取子組件屬性和方法的代碼實(shí)例,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
在當(dāng)今前端開(kāi)發(fā)領(lǐng)域,首屏加載速度和 SEO 優(yōu)化已成為衡量 Web 應(yīng)用質(zhì)量的重要指標(biāo),Vue3服務(wù)端渲染為解決這些問(wèn)題提供了優(yōu)雅的解決方案,下面小編就來(lái)和大家詳細(xì)講講吧2025-05-05
Vue.js開(kāi)發(fā)中常見(jiàn)的錯(cuò)誤分析與解決方案
在現(xiàn)代前端開(kāi)發(fā)中,Vue.js作為一款漸進(jìn)式JavaScript框架,以其簡(jiǎn)潔的API和響應(yīng)式數(shù)據(jù)綁定機(jī)制深受開(kāi)發(fā)者喜愛(ài),本文將以一組典型的Vue錯(cuò)誤信息為切入點(diǎn),深入分析問(wèn)題根源,并提供詳細(xì)的解決方案和最佳實(shí)踐,需要的可以了解下2025-08-08
這篇文章主要介紹了vxetable的高亮行不顯示的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05
vue3 中的 hooks 就是函數(shù)的一種寫法，就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái)，放到單獨(dú)的js文件中，或者說(shuō)是一些可以復(fù)用的公共方法/功能，這篇文章主要介紹了vue3中hooks的簡(jiǎn)介及用法,需要的朋友可以參考下2023-01-01
vue3利用v-model實(shí)現(xiàn)父子組件之間數(shù)據(jù)同步的代碼詳解
在Vue 3中,v-model這一指令也得到了升級(jí),使得父子組件之間的數(shù)據(jù)同步變得更加容易和靈活,本文將探討一下Vue 3中如何利用v-model來(lái)實(shí)現(xiàn)父子組件之間的數(shù)據(jù)同步,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue自定義toast組件的相關(guān)資料,需要的朋友可以參考下2018-08-08
Vue3訪問(wèn)頁(yè)面時(shí)自動(dòng)獲取數(shù)據(jù)的方法實(shí)現(xiàn)
本文介紹了在Vue3中如何利用生命周期鉤子函數(shù)和定時(shí)器實(shí)現(xiàn)訪問(wèn)頁(yè)面時(shí)自動(dòng)獲取數(shù)據(jù)的方法,這種方法適用于需要在頁(yè)面加載時(shí)即時(shí)更新數(shù)據(jù)顯示的場(chǎng)景,感興趣的可以了解一下2024-11-11
Vue Router4與Router3路由配置與區(qū)別說(shuō)明
這篇文章主要介紹了Vue Router4與Router3路由配置與區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-12-12