vue動(dòng)態(tài)路由加載時(shí)出現(xiàn)Cannot?find?module?xxx問題
vue動(dòng)態(tài)路由加載時(shí)報(bào)錯(cuò)Cannot find module xxx
vue由靜態(tài)路由改為動(dòng)態(tài)路由時(shí)，出現(xiàn)下面的錯(cuò)誤
靜態(tài)路由懶加載，當(dāng)我們把在router里面，把它寫死在ts里時(shí)，它加載的ok的，可是我們通過api接口拉取過來的數(shù)據(jù)時(shí)，發(fā)現(xiàn)是不報(bào)了上面的錯(cuò)
// 靜態(tài)路由懶加載
export const loadView = (view: any) => {
return () => import(`@/views/${view}.vue`)
}
錯(cuò)誤原因是webpack打包邏輯，webpack4中動(dòng)態(tài)import不支持變量方式，查看路由返回的信息，只是返回一個(gè)方法。
而靜態(tài)路由的返回，這個(gè)才是正確的組件返回方式
但是我們是要改為動(dòng)態(tài)路由，則必須把它修改為
這樣動(dòng)態(tài)路由加載就OK了
export const loadView = (view: any) => {
return (resolve: any) => require([`@/views/${view}.vue`], resolve)
}
vue踩坑之旅
錯(cuò)誤信息
Cannot find module '@/views/login/xxx' at webpackEmptyContext (eval at ./src/router sync recursive (app.js:2562), <anonymous>:2:10) at eval (asyncLoginRouter.ts?425a:20)
解決方法
①進(jìn)入router中的index.js
component: () => import('@/views/login/index'),改為
component: (resolve) => require(["@/views/login/index"], resolve),
②如果是動(dòng)態(tài)路由則
export const loadView = (view) => { // 路由懶加載
return () => import(`@/views/${view}`)
}改為
export const loadView = (view) => { // 路由懶加載
return (resolve) => require([`@/views/${view}`], resolve)
}原因分析
webpack4中動(dòng)態(tài)import不支持變量方式，
該修改對(duì)于生產(chǎn)環(huán)境無影響，只在開發(fā)環(huán)境有問題
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼
本文主要介紹了vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
本文將詳細(xì)介紹Vuex的使用方法,包括參數(shù)值的獲取、修改,以及異步數(shù)據(jù)處理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue中配置scss全局變量的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue打包后dist目錄下的index.html網(wǎng)頁顯示空白的問題(兩種方案)
本文主要介紹了vue打包后dist目錄下的index.html網(wǎng)頁顯示空白的問題,主要介紹了兩種方式,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄頁背景粒子特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue3父子組件通信之子組件修改父組件傳過來的值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
vue項(xiàng)目fetch本地PAG格式文件404 NotFound的解決
這篇文章主要介紹了vue項(xiàng)目fetch本地PAG格式文件404 NotFound的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue?url跳轉(zhuǎn)解析和參數(shù)編碼介紹
這篇文章主要介紹了vue?url跳轉(zhuǎn)解析和參數(shù)編碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue限制文本框輸入數(shù)字的正確姿勢(shì)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07