Vue3 + Vite根据接口返回的信息动态引用组件

在这篇文章 《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函数改变页面元素从而导致重绘。