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

更新时间：2023年07月10日 11:56:21 作者：桂亭亭

这篇文章主要给大家介绍了关于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文件读取出来放到一个数组之中的。

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

总结

到此这篇关于vue3 Error:Unknown variable dynamic import: ../views/的解决方案的文章就介绍到这了,更多相关Unknown variable dynamic import内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中axios的二次封装实例讲解
在本篇文章里小编给大家整理了关于vue中axios的二次封装实例以及相关知识点总结，需要的朋友们可以学习下。
2019-10-10
vue实现全选、反选功能
这篇文章主要为大家详细介绍了vue实现全选、反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
基于vue手动实现一个日历组件
这篇文章主要为大家详细介绍了如何基于vue手动实现一个日历组件,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下
2024-01-01
vue3时间戳转换（不使用过滤器）
这篇文章主要介绍了vue3时间戳转换， vue2转换时间戳的时候一般使用过滤器的方式，到vue3之后，vue3移除了过滤器，就不能再用了，官方是推荐使用方法或者计算属性的方式。下面我们来看看详细介绍吧</P><P>
2021-12-12
element日期组件实现只能选择小时或分钟
本文主要介绍了element日期组件实现只能选择小时或分钟，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
vue3中vuex与pinia的踩坑笔记记录
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要给大家介绍了关于vue3中vuex与pinia踩坑的相关资料,需要的朋友可以参考下
2021-12-12
一文带你掌握Vue中的路由守卫
路由守卫（Route Guards）是 Vue Router 的一个功能,它允许我们在路由发生之前执行逻辑判断,这篇文章主要为大家介绍了Vue中路由守卫的具体应用,需要的可以了解下
2024-03-03
Vue 中使用富文本编译器wangEditor3的方法
这篇文章主要介绍了Vue 中使用富文本编译器wangEditor3的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
详解vue element plus多语言切换
这篇文章主要为大家介绍了vue element plus多语言切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
深入了解Vue3模板编译原理
这篇文章主要介绍了深入了解Vue3模板编译原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11