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