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

时间:2021-2-20 作者:admin

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版本号

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。