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

Posted 2023-04-01

参考技术A vue由静态路由改为动态路由时，出现下面的错误

静态路由懒加载，当我们把router写死import()里面它是正常加载的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错。

export const importPath = (comUrl) =>

  return () => import(`@$comUrl.vue`)



分析后台返回的数据

根据后台返回给我数据component 所以在filterComponent 方法里面@ 符合后面不需要加/

const path =  importPath(component)

console.log(path)

path =  @/views/process/report/index.vue

报错就是这么出现的，但我查阅了webpack import 文档以后发现问题所在

import 传入的地址是通过正则去查找的

webpack import 文档 请查阅

修改importPath 方法

删除component字符串左侧斜杠 /

export const importPath = (comUrl) =>

  const path = subObliqueLine(comUrl)

  return () => import(`@/$path.vue`)



export const subObliqueLine = (str) =>

  if (str === undefined)

    return str

 

  return str.replace(/(^\/*)/g, '')



我的webpack版本号

vue项目访问页面是报错Error: Cannot find module '@/views/sys/menu/index'

运行项目能正常运行，但是再项目中访问后台返回的动态路径时就出现：

 

网上有些文章提出是问题出现是因为路由懒加载时路径没加载出来，可能node与npm 版本对应，可以修改node版本，然后删了 node_modules文件，重新npm install。这个不知行不行，可自行验证。

另外一种，解决方法如下：（webpack 版本问题）

// 路由懒加载 （原来写法）
// export const loadView = (view) => {
//   return () => import(`@/views/${view}`)
// }

//改为新写法
export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}`], resolve)
};

OK！