vue动态路由引入组件错误

5,106 阅读1分钟

由vue动态路由引入组件出现的错误;以下是两种方式的引入:

  • ES6-import引入方式
export const loadView = (view) => {
    return () => import(`@/views/${view}`)
};

import方式在编译的时候出现警告:Critical dependency: the request of a dependency is an expression

本以为警告应该影响不大,结果去浏览器点击动态引入的路由菜单查看,却报错了,显示找不到该模块!

然后我就开始尝试查找原因,把return () => import(`@/views/${view}`)暂时换成return () => import(`@/views/system/user/index`);发现运行正常,且编译器不出现上面的错误了;不知道啥原因,后续又百度了一下;还是无果。没办法,就换了下面的这种引入方式,发现正常。

  • commonJs-require引入方式
export const loadView = (view) => {
    return resolve => require([`@/views/${view}`], resolve)
};

虽然解决了问题,但是不知道造成这种问题的根本原因在哪?有哪位大佬能够指点一二吗?感激不尽....

嗯..我老大告诉我是webpack的原因,升级一下webpack,确实好像webpack之前有这个require和import的bug