vue动态加载组件import引入组件找不到组件(Error: Cannot find module)

使用场景

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

问题描述

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

问题原因

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

解决方案

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


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

希望对大家有帮助,有更好的方法大家也可以分享一下!!!

你可能感兴趣的:(js,vue.js,javascript,前端,webpack,es6)