快捷導(dǎo)航

vue3?Error:Unknown?variable?dynamic?import:?../views/的解決方案

更新時(shí)間：2023年07月10日 11:56:21 作者：桂亭亭

這篇文章主要給大家介紹了關(guān)于vue3?Error:Unknown?variable?dynamic?import:?../views/的解決方案,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

報(bào)錯(cuò)截圖

錯(cuò)誤信息

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中是可以正常運(yùn)行的但是在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文件讀取出來放到一個(gè)數(shù)組之中的。

然后再去數(shù)組中取值，這樣才能動(dòng)態(tài)的加載組件實(shí)現(xiàn)動(dòng)態(tài)路由的效果。

總結(jié)

到此這篇關(guān)于vue3 Error:Unknown variable dynamic import: ../views/的解決方案的文章就介紹到這了,更多相關(guān)Unknown variable dynamic import內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: