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

更新時間：2020年05月13日 14:11:07 作者：Java技術干貨

這篇文章主要介紹了詳解vue-router的Import異步加載模塊問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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的特性，嘗試出了一個臨時解決方案。

到此這篇關于詳解vue-router的Import異步加載模塊問題的解決方案的文章就介紹到這了,更多相關vue-router的Import異步加載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理
這篇文章主要介紹了vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理,需要的朋友可以參考下
2017-03-03
深入淺析Vue不同場景下組件間的數(shù)據(jù)交流
探通過本篇文章給大家探討不同場景下組件間的數(shù)據(jù)“交流”的Vue實現(xiàn)方法，感興趣的朋友一起看看吧
2017-08-08
vue父子組件通訊的所有方法小結
本文將介紹父組件與子組件之間傳遞數(shù)據(jù)的四種方法,以一個簡單的小demo為例,通過實例全方位解析和代碼演示,便于大家理解,需要的朋友可以參考下
2024-07-07
Vue3使用路由及配置vite.alias簡化導入寫法的過程詳解
這篇文章主要介紹了Vue3使用路由及配置vite.alias簡化導入寫法，本文通過實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-11-11
VUE前端如何處理后端接口返回的圖片詳解
在現(xiàn)代Web開發(fā)中,前端應用經常需要從后端接口獲取圖片數(shù)據(jù),下面這篇文章主要介紹了VUE前端如何處理后端接口返回的圖片的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09
vue-admin-template解決登錄和跨域問題解決
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
vue + element ui實現(xiàn)播放器功能的實例代碼
這篇文章主要介紹了vue + element ui實現(xiàn)播放器功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04
Vue路由傳參的三種方式實例詳解
vue路由傳參的使用場景一般都是應用在父路由跳轉到子路由時,攜帶參數(shù)跳轉,下面這篇文章主要給大家介紹了關于Vue路由傳參的三種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-01-01
詳解Vue3 Teleport 的實踐及原理
這篇文章主要介紹了Vue3 Teleport 組件的實踐及原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
ant?design?vue的form表單取值方法
這篇文章主要介紹了ant?design?vue的form表單取值方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06