Vue3 or: 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:20triggerError @ vue-router.mjs:3451(匿名) @ vue-router.mjs:3173Promise.catch(异步)pushWithRedirect @ vue-router.mjs:3167push @ vue-router.mjs:3099fromDetail @ ArticleCard.vue:95callWithErrorHandling @ runtime-core.esm-bundler.js:173callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182invoker @ runtime-dom.esm-bundler.js:345dynamic-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文件读取出来放到一个数组之中的。

然后再去数组中取值，这样才能动态的加载组件实现动态路由的效果。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-24/161776.html，文章来源：网络cs，作者：言安琪，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！