vue動(dòng)態(tài)路由加載時(shí)出現(xiàn)Cannot?find?module?xxx問(wèn)題
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里面，把它寫(xiě)死在ts里時(shí)，它加載的ok的，可是我們通過(guò)api接口拉取過(guò)來(lái)的數(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)境無(wú)影響，只在開(kāi)發(fā)環(huán)境有問(wèn)題
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue2與Vue3中Ref綁定元素方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
VUE DEMO之模擬登錄個(gè)人中心頁(yè)面之間數(shù)據(jù)傳值實(shí)例
今天小編就為大家分享一篇VUE DEMO之模擬登錄個(gè)人中心頁(yè)面之間數(shù)據(jù)傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
解決vue-element-admin中配置跨域出現(xiàn)的問(wèn)題
這篇文章主要介紹了解決vue-element-admin中配置跨域出現(xiàn)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue+electron實(shí)現(xiàn)創(chuàng)建多窗口及窗口間的通信(實(shí)施方案)
這篇文章主要介紹了vue+electron實(shí)現(xiàn)創(chuàng)建多窗口及窗口間的通信,本文給大家分享實(shí)施方案結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue首頁(yè)加載過(guò)慢的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue分類(lèi)篩選filter方法簡(jiǎn)單實(shí)例
這篇文章主要介紹了vue分類(lèi)篩選filter方法的簡(jiǎn)單實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
data屬性是Vue實(shí)例的數(shù)據(jù)對(duì)象,可以綁定的是對(duì)象或者是函數(shù),下面這篇文章主要給大家介紹了關(guān)于VUE中data配置項(xiàng)詳細(xì)解析的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語(yǔ)法,很少講實(shí)際的應(yīng)用場(chǎng)景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實(shí)際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08