解决vue动态加载组件import引入组件找不到组件(Error: Cannot find module)
作者：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`))
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。