如何使用 Vite 构建单独的组件块以使用 DefineAsyncComponent 加载

Question

我不确定这是否可能，但看起来有些活动部件已经存在。

目标： 创建一个单文件 Vue 3 组件库，该库将使用 Vite 编译成单独的块，并在运行时动态/异步加载。应用程序本身将加载，然后加载单独分块元素的目录以放入工具箱中，因此之后可以更新每个元素，并且可以通过将新块放入同一路径来添加新元素。

到目前为止，我可以在 vite.config 中创建单独的块，如下所示：

...
build: {
  rollupOptions: {
    output: {
      ...buildChunks()
    }
  }
}
...

buildChunks函数迭代 ./src/toolbox 路径中的 SFC 文件并返回一个对象，例如...

{
  'toolbox/comp1':['./src/toolbox/comp1.vue'],
  'toolbox/comp2':['./src/toolbox/comp2.vue'],
  'toolbox/comp3':['./src/toolbox/comp3.vue'],
  ...
}

这一切都有效，但我不确定如何实现下一个飞跃，即服务器代码动态加载所有生成的块文件，而不在代码中明确列出它们。此外，由于 Vite 构建会在每个构建的文件名中添加 ID（例如 comp.59677d29.js），因此无法在导入中显式引用实际文件名。

到目前为止，我考虑的是对每个文件使用DefineAsyncComponent(()=>import(url))，但我需要生成要导入的这些文件的列表...这可以通过构建我猜是在构建时的清单文件。

有什么建议么？有更好的方法吗？