vue3을 사용하여 구성 요소를 동적으로 로드하고 구성 요소를 동적으로 도입하는 방법

const modules = import.meta.glob('../views/*/*.vue');

// vite 生成的代码
const modules = {
  './views/foo.vue': () => import('./views/foo.vue'),
  './views/bar.vue': () => import('./views/bar.vue')
}

const changeComponents = (e:string)=>{
	const link = modules[`../custom_components/${e}.vue`]
	console.log(link,'link')
}

layouts.value = markRaw(defineAsyncComponent(link))

<template>	
	<div @click="changeComponents(&#39;kk&#39;)">显示kk.vue</div>
	<div @click="changeComponents(&#39;index&#39;)">显示index.vue</div>
	<component :is="layouts"/>
</template>

<script lang=&#39;ts&#39; setup>
	const modules = import.meta.glob(&#39;../custom_components/*.vue&#39;);
	let layouts = ref<any>(null)
	const changeComponents = (e:string)=>{
		const link = modules[`../custom_components/${e}.vue`]
        layouts.value = markRaw(defineAsyncComponent(link))
	}
</script>