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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用 JSON.stringify() 列化一个Error
这篇文章主要介绍了使用 JSON.stringify() 列化一个Error,需要的朋友可以参考下
2023-10-10
vue-cli实现多页面多路由的示例代码
本篇文章主要介绍了vue-cli实现多页面多路由的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
在vue中使用setInterval的方法示例
这篇文章主要介绍了在vue中使用setInterval的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
解析Vue 2.5的Diff算法
本文将对于Vue 2.5.3版本中使用的Virtual Dom进行分析。updataChildren是Diff算法的核心，所以本文对updataChildren进行了图文的分析。下面通过本文给大家分享Vue 2.5的Diff算法，需要的朋友参考下吧
2017-11-11
VUE中v-model和v-for指令详解
本篇文章主要介绍了VUE中v-model和v-for指令详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
分享Vue子组件接收父组件传值的3种方式
这篇文章主要给大家分享的是Vue子组件接收父组件传值的3种方式，主要通过声明接收、接收数据的同时进行类型限制、接收数据的同时对数据类型、必要性、默认值进行限制相关内容展开更多详细的相关资料，需要的小伙伴可以参考一下
2022-03-03
vue-cli3搭建项目的详细步骤
这篇文章主要介绍了vue-cli3搭建项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
一文详解Vue中keep-alive的实现原理
在 Vue.js 开发单页面应用（SPA）时,组件的频繁创建和销毁会带来一定的性能开销,为了优化这一问题,Vue 提供了 keep-alive 组件,本文将深入剖析 keep-alive 的实现原理,需要的朋友可以参考下
2025-10-10
Vue3 中实现元素拖拽功能
这篇文章主要介绍了在Vue3中实现飘逸的元素拖拽,在本次案例中需要认真思考对应的几个坐标和移动时坐标如何更新，事件的使用要成对出现，如何在这个拖拽的 Icon 上增加点击事件时还需要多做一些处理，需要的朋友可以参考下
2023-07-07
Vue Router初始化路由信息详解
这篇文章主要为大家详细介绍了Vue Router初始化路由信息的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
2023-11-11