溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何解決vue-router的Import異步加載模塊問題，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
1、問題現(xiàn)象
2、出現(xiàn)問題的代碼點
3、替代方案：
把import() 替換成如下：
Promise.resolve().then(()=>require(`@/views/${str}`))
4、原因分析
項目在編譯時，出現(xiàn)一個警告
這個警告的含義：
require接收了一個變量，會報上面的警告，接收一個寫死的字符串值時則沒有警告！
我們通過控制臺查看到import()對應編譯過后的代碼：
從上圖可以看到require接收了一個變量，所以運行時出現(xiàn)了警告。
那這樣就會報上面找不到對應的模塊。
那我們再來看一個import()正確編譯過后的代碼：
通過對比編譯過后的代碼，可以輕易發(fā)現(xiàn)不同點。
花了大量時間，去找node_modules中的那個包版本不一致導致的，有一次嘗試成功了， 但回想不起是哪一步操作的呢，再復現(xiàn)的時候，也沒對了。先暫時擱置吧，希望對webpack和Babel熟悉的大佬看到，能指點一二了。
所以根據(jù)編譯過后的代碼，以及require的特性，嘗試出了一個臨時解決方案。
看完上述內(nèi)容，是不是對如何解決vue-router的Import異步加載模塊問題有進一步的了解，如果還想學習更多內(nèi)容，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
