uniapp使用defineAsyncComponent真机和app无效

原创已于 2024-04-17 13:43:51 修改 · 849 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#uni-app #前端 #javascript

收录于

于 2024-04-07 11:30:42 首次发布

本文介绍了如何在从H5项目迁移到使用Vite构建的APP端应用中，替换defineAsyncComponent以实现动态加载组件，特别强调了import.meta.glob在Vite中的作用以及相应的代码示例。

defineAsyncComponent只能在H5用，APP端改为使用vite的 import.meta.glob，
注意：import.meta.glob不是vue或uni自带的，是vite的方法，我项目使用了vite;
代码示例：

<template>
	<component :is="comp.tb“></component>
</template>
<script>
import { defineAsyncComponent, onMounted, reactive,markRaw } from 'vue'
setup() {
	const comp = reactive({})
	onMounted(async () => {
		const fileModules = import.meta.glob('./tb.vue')
		const c = await fileModules['./tb.vue']()
		comp.tb = markRaw(c.default)
	})
	return {
		comp
	}
}
</script>