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

3,417 阅读1分钟

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 方法

export const importPath = (comUrl) => {
  const path = subObliqueLine(comUrl)
  return () => import(`@/${path}.vue`)
}
// 删除component字符串左侧斜杠 /

export const subObliqueLine = (str) => {

if (str === undefined) {    
    return str 
 }  
return str.replace(/(^\/*)/g, '')}

我的webpack版本号