解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問(wèn)題
報(bào)錯(cuò)信息應(yīng)該是這樣的
webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10)
路由信息由后端給出，那么前端需要?jiǎng)討B(tài)加載路由，同時(shí)component的路徑也是后端給出，但是動(dòng)態(tài)加載該路徑會(huì)報(bào)錯(cuò)
如：
// 假如path = '@/views/user'
const com = () => import(path) // 這樣會(huì)報(bào)錯(cuò)哦
const com2 = () = > import('@/views/user') // 這樣寫(xiě)死的字符串就可以
原因應(yīng)該是在webpack，webpack 編譯es6 動(dòng)態(tài)引入 import() 時(shí)不能傳入變量，因?yàn)閣ebpack的現(xiàn)在的實(shí)現(xiàn)方式不能實(shí)現(xiàn)完全動(dòng)態(tài)。
解決辦法：
可以通過(guò)字符串模板來(lái)提供部分信息給webpack，例如import(`@/${path}`), 這樣編譯時(shí)會(huì)編譯所有@/views下的模塊，但運(yùn)行時(shí)確定path的值才會(huì)加載，從而實(shí)現(xiàn)懶加載。
如果寫(xiě)了@給webpack還是不能識(shí)別，那么可能你需要多些幾級(jí)的路徑，如import(`@/views/${path}`)
補(bǔ)充知識(shí)：vue中使用import路由懶加載報(bào)錯(cuò)解決方法
一般情況下都會(huì)正常運(yùn)行，但當(dāng)我們運(yùn)行npm run dev時(shí)卻報(bào)錯(cuò)
原因是import屬于異步引用組件，需要babel-loader處理
所以我們需要安裝
npm install babel-plugin-syntax-dynamic-import -D
這是用來(lái)編譯import異步引用方法的模塊
然后在.babelrc中引入這個(gè)插件
{
“plugin”: [‘syntax-dynamic-import']
}
以上這篇解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
基于Vue.js+Nuxt開(kāi)發(fā)自定義彈出層組件
這篇文章主要介紹了基于Vue.js+Nuxt開(kāi)發(fā)自定義彈出層組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤(pán)點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue使用百度地圖實(shí)現(xiàn)城市定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue3如何將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖
這篇文章主要介紹了vue3實(shí)現(xiàn)將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue依賴(lài)包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴(lài)包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue中下載文件后無(wú)法打開(kāi)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了vuex中Modules的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04