vue3?Error:Unknown?variable?dynamic?import:?../views/的解決方案
報錯截圖
錯誤信息
vue-router.mjs:3451 Error: Unknown variable dynamic import: ../views/BlogGather/DetailsArticlePage/pc/DetailsArticlePage.vue
at dynamic-import-helper:7:96
at new Promise (<anonymous>)
at default (dynamic-import-helper:6:12)
at details.js?t=1681893616671:15:20
triggerError @ vue-router.mjs:3451
(匿名) @ vue-router.mjs:3173
Promise.catch(異步)
pushWithRedirect @ vue-router.mjs:3167
push @ vue-router.mjs:3099
fromDetail @ ArticleCard.vue:95
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
invoker @ runtime-dom.esm-bundler.js:345
dynamic-import-helper:7 Uncaught (in promise) Error: Unknown variable dynamic import: ../views/BlogGather/DetailsArticlePage/pc/DetailsArticlePage.vue
at dynamic-import-helper:7:96
at new Promise (<anonymous>)
at default (dynamic-import-helper:6:12)
at details.js?t=1681893616671:15:20
原來的代碼
const path = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ? 'mobile/' : 'pc/'
console.log(path)
export const routes=[
{
name: "index",
path: "/",
component: ()=>import(`../views/BlogGather/IndexPage/${path}IndexPage.vue`),
meta: {title: "博客"},
},
{
name: "xq",
path: "/DetailsArticlePage",
component: import(`../views/BlogGather/DetailsArticlePage/${path}DetailsArticlePage.vue`),
meta: {title: "詳情頁面"},
},
];這樣的寫法在Vue2中是可以正常運行的但是在Vue3中就不可以了的。
修改后的代碼
const path = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ? 'mobile/' : 'pc/'
console.log(path)
let modules = import.meta.glob('../views/BlogGather/**/**/*.vue')
console.log(modules)
export const routes=[
{
name: "index",
path: "/",
component: ()=>import(`../views/BlogGather/IndexPage/${path}IndexPage.vue`),
meta: {title: "博客"},
},
{
name: "xq",
path: "/DetailsArticlePage",
component: modules[(`../views/BlogGather/DetailsArticlePage/${path}DetailsArticlePage.vue`)],
meta: {title: "詳情頁面"},
},
];我們注意到，我們是先將所有的vue文件讀取出來放到一個數(shù)組之中的。
然后再去數(shù)組中取值，這樣才能動態(tài)的加載組件實現(xiàn)動態(tài)路由的效果。
總結(jié)
到此這篇關(guān)于vue3 Error:Unknown variable dynamic import: ../views/的解決方案的文章就介紹到這了,更多相關(guān)Unknown variable dynamic import內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用 JSON.stringify() 列化一個Error,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了vue-cli實現(xiàn)多頁面多路由的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了在vue中使用setInterval的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本文將對于Vue 2.5.3版本中使用的Virtual Dom進行分析。updataChildren是Diff算法的核心，所以本文對updataChildren進行了圖文的分析。下面通過本文給大家分享Vue 2.5的Diff算法，需要的朋友參考下吧2017-11-11
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要給大家分享的是Vue子組件接收父組件傳值的3種方式，主要通過聲明接收、接收數(shù)據(jù)的同時進行?類型限制、接收數(shù)據(jù)的同時對?數(shù)據(jù)類型、必要性、默認值?進行限制相關(guān)內(nèi)容展開更多詳細的相關(guān)資料，需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了vue-cli3搭建項目的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
在 Vue.js 開發(fā)單頁面應用（SPA）時,組件的頻繁創(chuàng)建和銷毀會帶來一定的性能開銷,為了優(yōu)化這一問題,Vue 提供了 keep-alive 組件,本文將深入剖析 keep-alive 的實現(xiàn)原理,需要的朋友可以參考下2025-10-10
這篇文章主要介紹了在Vue3中實現(xiàn)飄逸的元素拖拽,在本次案例中需要認真思考對應的幾個坐標和移動時坐標如何更新，事件的使用要成對出現(xiàn)，如何在這個拖拽的 Icon 上增加點擊事件時還需要多做一些處理，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue Router初始化路由信息的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解一下2023-11-11