在多个组件中优化动态加载逻辑,使用 API 获取组件并处理加载失败情况,以提升用户体验和代码健壮性

This commit is contained in:
jxxghp
2025-05-03 22:31:38 +08:00
parent 078afd5174
commit abff2071bd
3 changed files with 36 additions and 8 deletions

View File

@@ -40,7 +40,17 @@ const dynamicComponent = computed(() => {
if (renderMode.value === 'vue' && vueComponentUrl.value) {
const url = vueComponentUrl.value
return defineAsyncComponent(() =>
import(/* @vite-ignore */ url)
api
.get(url)
.then((response: any) => {
if (response) {
const blob = new Blob([response.data], { type: 'text/javascript' })
const blobUrl = URL.createObjectURL(blob)
return import(/* @vite-ignore */ blobUrl)
} else {
return { render: () => h('div', '组件加载失败: 无默认导出') }
}
})
.then(module => {
if (module.default) {
return module.default