1、問題現象

2、出現問題的程式碼點

3、替代方案：

把import() 替換成如下：

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

4、原因分析

專案在編譯時，出現一個警告

這個警告的含義：

require接收了一個變數，會報上面的警告，接收一個寫死的字串值時則沒有警告！

我們通過控制檯檢視到import()對應編譯過後的程式碼：

從上圖可以看到require接收了一個變數，所以執行時出現了警告。

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

那我們再來看一個import()正確編譯過後的程式碼：

通過對比編譯過後的程式碼，可以輕易發現不同點。

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

所以根據編譯過後的程式碼，以及require的特性，嘗試出了一個臨時解決方案。

到此這篇關於詳解vue-router的Import非同步載入模組問題的解決方案的文章就介紹到這了,更多相關vue-router的Import非同步載入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！