在这篇文章 《Vue3 根据接口返回的信息动态引用组件》中提到了通过使用 defineAsyncComponent 来实现根据接口返回的信息来动态引入组件
但是在使用 vite 作为构建工具时,在本地使用这种导入方式是没有问题,在打包之后就会报错,提示
查阅 vite 官方文档发现,在vite 中使用 import.meta.glob 来进行导入。
let modules = import.meta.glob('../../../views/**/*.vue') // 获取到所有组件的路径
先获取到所有组件的路径,因为 glob 匹配到的文件默认是懒加载的,通过动态导入实现,并会在构建时分离为独立的 chunk。 因此在这时候实际上并没有真正意义上导入全部文件,因此不会因为导入过多而引起页面卡顿。
glob 导入的组件需要通过 .then 方法拿到使用,因为 .then 是异步的,所以我这里使用了async 和await 来等待 .then方法执行完毕,确保页面加载完成时动态导入的组件能够在页面上正常显示。
其中 path1 里面存储的是返回信息中的路径信息,根据 path1 筛选出满足条件的组件 mod,并在其default 中拿到组件的导入信息。
在开发的时候遇到了一个问题,导入多个组件的时候最后一个组件不能正常显示,推测应该还是异步导致的问题,页面渲染完毕之后,触发重绘就能正常显示,我的解决方式是改变页面元素的坐标导致其进行重绘,从而绕过这个问题。
在获取完数据之后调用sizeChagne函数改变页面元素从而导致重绘。