学无先后,达者为师

网站首页 Vue 正文

vue动态路由加载时 Cannot find module xxx 错误解决方法

作者:longzhoufeng 更新时间: 2022-04-04 Vue

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)
}

原文链接:https://blog.csdn.net/longzhoufeng/article/details/106469115

栏目分类
最近更新