vue动态路由异步加载import组件,加载不到module的问题

本文探讨了在使用Webpack时,动态import语法结合后端提供的组件路径导致的错误。通过字符串模板的方式,如import(`@/${path}

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

报错信息应该是这样的

webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10)

路由信息由后端给出,那么前端需要动态加载路由,同时component的路径也是后端给出,但是动态加载该路径会报错

如:

// 假如path = '@/views/user'
const com = () => import(path) // 这样会报错哦

const com2 = () = > import('@/views/user') // 这样写死的字符串就可以

原因应该是在webpack,webpack 编译es6 动态引入 import() 时不能传入变量,因为webpack的现在的实现方式不能实现完全动态。

解决办法:

可以通过字符串模板来提供部分信息给webpack,例如import(`@/${path}`), 这样编译时会编译所有@/views下的模块,但运行时确定path的值才会加载,从而实现懒加载。

如果写了@给webpack还是不能识别,那么可能你需要多些几级的路径,如import(`@/views/${path}`)

以上,亲测有效,有问题欢迎提问

评论 34
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值