vue-admin中从后台拉取路由表import导入找不到模块?

问题描述

使用动态路由无法加载模块
报错信息如下:

vue-router.esm.js:2117 Error: Cannot find module '@/components/main/main.vue'
    at webpackEmptyContext (libs sync:2)
    at lazyLoading.js:2

但是在 routers.js 中引用的
首页和登录页面都是可以正常打开的

image.png

用户登录后从数据中加载的路由地址通过动态加载无法打开

调用方式如下

menu.component = lazyLoading(menu.component)

lazyLoading.js 代码如下

// export default (url) => () => import(`@/${url}`)
// 这种不可以
export default (url) => () => import(`@/` + url)
// 这个可以
// export default (url) => () => import(`@/components/main`)

npm run dev 会出现以上描述情况
不修改任何代码的情况下
但是 npm run build 则所以模块正常打开

已解决 悬赏分:80 - 解决时间 2022-01-05 06:17
反对 0举报 0 收藏 0

回答2

最佳
  • @

    是webpack版本引起的问题,点击这个查看
    或者直接吧
    把import() 替换成如下:

    Promise.resolve().then(()=>require(`@/views/${str}`))
    支持 0 反对 0 举报
    2022-01-04 09:44
  • @

    反引号不是单双引号,尽管它可以与直接字字符相加拼接。但不可与变量进行这种运算,更详细内容请自行查阅mdn中的模板字符串部分。

    支持 0 反对 0 举报
    2022-01-04 10:40