解决vue动态加载组件import引入组件找不到组件(Error:Cannotfindmodule)

使用场景

在一个项目中封装了好多组件，根据接口返回不同类型值在页面中动态加载对应的组件。

问题描述

使用了动态加载组件的方法，组件用 import() 引入时，直接写成静态路径组件能找到，但是路径里面使用了变量组件就找不到了，报错 Error:Cannot find module

问题原因

import() 语法是 ES6 中新引入的动态加载模块的语法，它可以在运行时加载模块，返回一个 Promise 对象，可以用来加载不同的模块。

所以import()语法本身是一个函数，其中可以传入一个字符串，用来表示要加载的模块的路径，但是不能传入变量，因为变量的值在运行时可能会改变，而import()语法是在编译时就已经确定的，所以不能传入变量。

解决方案

使用 webpack 的 require.ensure() 方法引入组件，它可以接受变量作为参数，并且可以返回 Promise 对象

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。