vue-router的Import() 異步加載模塊問題的解決方案


關注不迷路,如果解決了問題,留下個贊。

1、問題現象

2、出現問題的代碼點

3、替代方案:

import() 替換成如下:

Promise.resolve().then(()=>require(`@/views/${str}`))

4、原因分析

項目在編譯時,出現一個警告

這個警告的含義:
require接收了一個變量,會報上面的警告,接收一個寫死的字符串值時則沒有警告!

我們通過控制台查看到import()對應編譯過后的代碼:

從上圖可以看到require接收了一個變量,所以運行時出現了警告。

那這樣就會報上面找不到對應的模塊。

那我們再來看一個import()正確編譯過后的代碼:

通過對比編譯過后的代碼,可以輕易發現不同點。

花了大量時間,去找node_modules中的那個包版本不一致導致的,有一次嘗試成功了, 但回想不起是哪一步操作的呢,再復現的時候,也沒對了。先暫時擱置吧,希望對webpack和Babel熟悉的大佬看到,能指點一二了。

所以根據編譯過后的代碼,以及require的特性,嘗試出了一個臨時解決方案。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM