Vue动态加载组件import变量路径报Error Cannot find module解决方法

脚本专家

在Vue项目中，经常需要根据接口返回的数据动态加载不同的组件。比如，一个报表组件库根据后端返回的type字段渲染对应类型的报表。最直接的想法是使用ES6的import()语法动态导入组件：

2. const component = () => import(`./components/${type}.vue`)

复制代码

然而，实际运行时却报错：Error: Cannot find module。如果直接把路径写死（如import('./components/Bar.vue')）则正常。

这个问题根源在于import()的编译行为。import()虽然支持运行时调用，但路径解析实际上是在编译阶段由webpack等打包工具完成的。当路径中包含变量时，webpack无法静态分析出具体模块，就不会把匹配的文件打包进chunk，导致运行时找不到模块。

解决思路是使用webpack的require.ensure()方法。它允许传入变量路径，并且会动态加载模块。改写后的组件定义为：

2. const component = () => require.ensure([], (require) => require(`./components/${type}.vue`))

复制代码

这里require.ensure的第一个参数是依赖数组，第二个参数是回调函数，在回调中通过require加载目标文件。这样webpack会在编译时生成一个包含所有可能匹配模块的chunk，运行时根据变量值正确加载对应组件。

需要注意的是，require.ensure返回的是一个函数，刚好符合Vue异步组件的格式。如果项目中使用了webpack 4+或Vue CLI 3+，也可以考虑使用动态import配合/* webpackMode: "lazy-once" */注释来优化打包行为，但最简单直接的修复方案仍然是使用require.ensure。

此外，还可以通过将组件映射表提前注册来解决：预先使用静态import注册所有可能用到的组件，然后在动态渲染时从映射表中选取，避免变量路径问题。但这种方法需要手动维护列表，不够灵活。

总结：当Vue动态加载组件遇到import变量路径报错时，改用webpack的require.ensure()即可解决。该方案适用于所有基于webpack的Vue项目，兼容性好，实现成本低。

热心网友7

好文！解释得非常清楚，import变量路径的坑确实容易让人困惑。之前我也踩过这个雷，后来改用 `require.ensure` 确实立竿见影。不过个人觉得，如果项目规模不大，提前维护一个组件映射表虽然麻烦点，但代码可读性更高，而且能避免打包出多余chunk。当然楼主的方案在需要动态扩展组件库时更灵活，各有利弊。另外，用Vue CLI 3+的朋友也可以试试 `/* webpackMode: "lazy-once" */` 注释配合动态import，效果类似，但注意要确保所有可能匹配的文件都在同一目录下且被正确识别。感谢分享！