關注不迷路,如果解決了問題,留下個贊。
1、問題現象
2、出現問題的代碼點
3、替代方案:
把import()
替換成如下:
Promise.resolve().then(()=>require(`@/views/${str}`))
4、原因分析
項目在編譯時,出現一個警告
這個警告的含義:
require接收了一個變量,會報上面的警告,接收一個寫死的字符串值時則沒有警告!
我們通過控制台查看到import()對應編譯過后的代碼:
從上圖可以看到require接收了一個變量,所以運行時出現了警告。
那這樣就會報上面找不到對應的模塊。
那我們再來看一個import()正確編譯過后的代碼:
通過對比編譯過后的代碼,可以輕易發現不同點。
花了大量時間,去找node_modules中的那個包版本不一致導致的,有一次嘗試成功了, 但回想不起是哪一步操作的呢,再復現的時候,也沒對了。先暫時擱置吧,希望對webpack和Babel熟悉的大佬看到,能指點一二了。
所以根據編譯過后的代碼,以及require的特性,嘗試出了一個臨時解決方案。