解决vue动态加载组件import引入组件找不到组件(Error: Cannot find module)
更新时间：2026年04月29日 08:53:45 作者：TTong___
文章描述了一个项目中动态加载组件的方法,使用import()语法时,由于其在编译时确定路径的特性,不能使用变量,需要使用webpack的require.ensure()方法,可以接受变量参数并返回Promise对象,此问题的解决方案是使用require.ensure()方法来引入动态组件
使用场景
在一个项目中封装了好多组件，根据接口返回不同类型值在页面中动态加载对应的组件。
问题描述
使用了动态加载组件的方法，组件用 import() 引入时，直接写成静态路径组件能找到，但是路径里面使用了变量组件就找不到了，报错 Error:Cannot find module
问题原因
import() 语法是 ES6 中新引入的动态加载模块的语法，它可以在运行时加载模块，返回一个 Promise 对象，可以用来加载不同的模块。
所以import()语法本身是一个函数，其中可以传入一个字符串，用来表示要加载的模块的路径，但是不能传入变量，因为变量的值在运行时可能会改变，而import()语法是在编译时就已经确定的，所以不能传入变量。
解决方案
使用 webpack 的 require.ensure() 方法引入组件，它可以接受变量作为参数，并且可以返回 Promise 对象
return () => require.ensure([], (require) => require(`./components/${type}.vue`))
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要讨论Vue data中随意改一个属性,视图都会更新吗?下面来自面试官的问题然后做i出的一个问题总结，具有一定的参考价值，需要的小伙伴可以参考一下2021-12-12
这篇文章主要为大家详细介绍了vue3组合式API获取子组件属性和方法的代码实例,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
在当今前端开发领域,首屏加载速度和 SEO 优化已成为衡量 Web 应用质量的重要指标,Vue3服务端渲染为解决这些问题提供了优雅的解决方案,下面小编就来和大家详细讲讲吧2025-05-05
在现代前端开发中,Vue.js作为一款渐进式JavaScript框架,以其简洁的API和响应式数据绑定机制深受开发者喜爱,本文将以一组典型的Vue错误信息为切入点,深入分析问题根源,并提供详细的解决方案和最佳实践,需要的可以了解下2025-08-08
这篇文章主要介绍了vxetable的高亮行不显示的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-05-05
vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能，这篇文章主要介绍了vue3中hooks的简介及用法,需要的朋友可以参考下2023-01-01
vue3利用v-model实现父子组件之间数据同步的代码详解
在Vue 3中,v-model这一指令也得到了升级,使得父子组件之间的数据同步变得更加容易和灵活,本文将探讨一下Vue 3中如何利用v-model来实现父子组件之间的数据同步,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue自定义toast组件的相关资料,需要的朋友可以参考下2018-08-08
本文介绍了在Vue3中如何利用生命周期钩子函数和定时器实现访问页面时自动获取数据的方法,这种方法适用于需要在页面加载时即时更新数据显示的场景,感兴趣的可以了解一下2024-11-11
这篇文章主要介绍了Vue Router4与Router3路由配置与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-12-12
最新评论