詳解vue-router的Import異步加載模塊問題的解決方案
1、問題現(xiàn)象
2、出現(xiàn)問題的代碼點(diǎn)
3、替代方案：
把import() 替換成如下：
Promise.resolve().then(()=>require(`@/views/${str}`))
4、原因分析
項(xiàng)目在編譯時(shí)，出現(xiàn)一個(gè)警告
這個(gè)警告的含義：
require接收了一個(gè)變量，會(huì)報(bào)上面的警告，接收一個(gè)寫死的字符串值時(shí)則沒有警告！
我們通過控制臺(tái)查看到import()對(duì)應(yīng)編譯過后的代碼：
從上圖可以看到require接收了一個(gè)變量，所以運(yùn)行時(shí)出現(xiàn)了警告。
那這樣就會(huì)報(bào)上面找不到對(duì)應(yīng)的模塊。
那我們?cè)賮砜匆粋€(gè)import()正確編譯過后的代碼：
通過對(duì)比編譯過后的代碼，可以輕易發(fā)現(xiàn)不同點(diǎn)。
花了大量時(shí)間，去找node_modules中的那個(gè)包版本不一致導(dǎo)致的，有一次嘗試成功了， 但回想不起是哪一步操作的呢，再?gòu)?fù)現(xiàn)的時(shí)候，也沒對(duì)了。先暫時(shí)擱置吧，希望對(duì)webpack和Babel熟悉的大佬看到，能指點(diǎn)一二了。
所以根據(jù)編譯過后的代碼，以及require的特性，嘗試出了一個(gè)臨時(shí)解決方案。
到此這篇關(guān)于詳解vue-router的Import異步加載模塊問題的解決方案的文章就介紹到這了,更多相關(guān)vue-router的Import異步加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue?組件異步加載方式(按需加載)
- 解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題
- vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
- vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
- vue異步加載高德地圖的實(shí)現(xiàn)
- vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
- 詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)
- Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)
- Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
相關(guān)文章
vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版，50行js代碼實(shí)現(xiàn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vant中field組件label屬性兩端對(duì)齊問題及解決
這篇文章主要介紹了vant中field組件label屬性兩端對(duì)齊問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車結(jié)算功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue+webpack實(shí)現(xiàn)異步組件加載的方法
下面小編就為大家分享一篇vue+webpack實(shí)現(xiàn)異步組件加載的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號(hào)密碼查出用戶信息，根據(jù)用戶id與name生成token并返回，userinfo則是對(duì)token進(jìn)行獲取，在查出對(duì)應(yīng)值進(jìn)行返回，感興趣的朋友一起看看吧2022-05-05
vite打包出現(xiàn)?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問題的解決辦法,文中通過代碼將解決的辦法介紹的非常詳細(xì),對(duì)同樣遇到這個(gè)問題的朋友具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法
下面小編就為大家分享一篇Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue?router權(quán)限管理實(shí)現(xiàn)不同角色顯示不同路由
本文主要介紹了vue?router權(quán)限管理實(shí)現(xiàn)不同角色顯示不同路由，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue3基礎(chǔ)安裝以及配置詳解,需要的朋友可以參考下2023-01-01