今天改了一个前端项目,路由是由后端动态生成的,发现部署到服务器上面是正常的,而本地测试的时候出现报错,路由跳转不了,而且报错信息只有一个找不到模块,检查了一下配置确定也没问题,让同事运行了一下发现他可以正常运行,我就怀疑是不是什么版本出现的问题,后面就在路由代码中一步一步排查,总算找到了问题。。。


先上报错信息: 


在控制台输出了一下生成路由的信息,发现component这个key返回的竟然是一个空方法,所以才会报错找不到模块


我们可以看见生成路由的时候 是经过特殊处理的,loadView(route.component) , 所以我断定是这个方法出现了问题,ok,找到问题所在那就都是毛毛雨了,我们可以看出来 loadView这个方法是使用的import来引入的组件,这个时候要敲重点了, 在webpack4中动态import不支持变量方式,该修改对于生产环境无影响,只在开发环境有问题。所以我们需要改成异步组件按需加载

export const loadView = (view) => { // 路由异步懒加载
  return (resolve) => require([`@/views/${view}`], resolve)
}

改完之后项目就可以正常运行了,今天因为这个问题浪费了不少时间,在这里记录一下如果下次再碰见这样的问题就知道怎么回事了,如果这篇文章有帮助到您 还请点个赞喔~

Logo

前往低代码交流专区

更多推荐