【vue3】defineAsyncComponent构建后路径错误解决

defineAsyncComponent是什么？

defineAsyncComponent用于异步加载组件，该方法接收一个返回promise的加载函数。ES 模块动态导入也是返回一个promise函数，所以多数情况下我们会将它们搭配使用，如：
const header = defindAsyncComponent(()=>import('./header.vue'))

问题描述

我正在使用defineAsyncComponent动态导入当前文件夹中的组件，如：

const currentSubApp = defineAsyncComponent(() => import(`./${subAppName}.vue`))

这在我本地运行的时候，可以打开没有问题。但是构建到prod后文件指向错误。

vite build后dist文件夹中没有生成动态导入的文件

解决

const modules: any = import.meta.glob('./*.vue')
const currentSubApp = defineAsyncComponent(modules[`./${subAppName}.vue`])