vue动态路由加载时出现Cannot find module xxx问题
更新时间：2023年01月10日 10:22:35 作者：longzhoufeng
这篇文章主要介绍了vue动态路由加载时出现Cannot find module xxx问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue动态路由加载时报错Cannot find module xxx
vue由静态路由改为动态路由时，出现下面的错误
静态路由懒加载，当我们把在router里面，把它写死在ts里时，它加载的ok的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错
// 静态路由懒加载
export const loadView = (view: any) => {
return () => import(`@/views/${view}.vue`)
}
错误原因是webpack打包逻辑，webpack4中动态import不支持变量方式，查看路由返回的信息，只是返回一个方法。
而静态路由的返回，这个才是正确的组件返回方式
但是我们是要改为动态路由，则必须把它修改为
这样动态路由加载就OK了
export const loadView = (view: any) => {
return (resolve: any) => require([`@/views/${view}.vue`], resolve)
}
vue踩坑之旅
错误信息
Cannot find module '@/views/login/xxx' at webpackEmptyContext (eval at ./src/router sync recursive (app.js:2562), <anonymous>:2:10) at eval (asyncLoginRouter.ts?425a:20)
解决方法
①进入router中的index.js
component: () => import('@/views/login/index'),改为
component: (resolve) => require(["@/views/login/index"], resolve),
②如果是动态路由则
export const loadView = (view) => { // 路由懒加载
return () => import(`@/views/${view}`)
}改为
export const loadView = (view) => { // 路由懒加载
return (resolve) => require([`@/views/${view}`], resolve)
}原因分析
webpack4中动态import不支持变量方式，
该修改对于生产环境无影响，只在开发环境有问题
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
手写可拖动穿梭框组件CustormTransfer vue实现示例
这篇文章主要为大家介绍了手写可拖动穿梭框组件CustormTransfer vue实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家详细介绍了如何使用Vue编写一个简单的日期选择器,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
vue-router(this.$router)如何在新窗口打开路由跳转页面
这篇文章主要介绍了vue-router(this.$router)如何在新窗口打开路由跳转页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
最近在研究Vue的组件库,之前也用过$attrs和$listeners,官方文档描述的不太详细,也没有太好的例子,下面这篇文章主要给大家介绍了关于Vue中$attrs和$listeners详解以及使用的相关资料,需要的朋友可以参考下2022-11-11
本文将演示如何使用Vue 3实现一个简单的密码强度检测功能,通过实时反馈,帮助用户创建更安全的密码,从而提升整体系统的安全性,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了在Vue中如何实现打字机的效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍的是Vue子组件与父组件，什么是父组件，什么是子组件很多时候面对这个问题我们都会有所混淆，下面文章我们就来详细介绍,需要的朋友可以参考一下2021-10-10
VUE在for循环里面根据内容值动态的加入class值的方法
这篇文章主要介绍了VUE在for循环里面根据内容值动态的加入class值的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue2中使用sass并配置全局的sass样式变量的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
最新评论