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

Cookysurongbin

于 2019-08-12 16:22:53 发布

阅读量3.4w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： vue webpack 动态加载路由

本文链接：https://blog.youkuaiyun.com/Cookysurongbin/article/details/99307933

12 篇文章

订阅专栏

3 篇文章

订阅专栏

1 篇文章

订阅专栏

本文探讨了在使用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}`)

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