vue3動態載入元件及動態引入元件怎麼使用

1.問題

在做一個用vite構建的vue3專案時，動態拉取導入.vue頁面，然後控制台一直有以下提示，頁面也無法渲染出來。

2.分析

根據上面的報錯提示，讓我們安裝並使用：@rollup/plugin-dynamic-import-vars 這個外掛（最終沒有這個方案）。

Vite官方文檔說需要使用Glob 導入形式，然後看了一個Glob的文檔，解決了這個問題（親測可行）。

首先需要使用特殊的import.meta.glob函數從檔案系統匯入多個模組：

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

他會匹配並匯入所有相關的元件：

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

那麼回到專案中，在home資料夾下的index.vue檔案中導入custom_components資料夾下的所有 .vue檔

因此，根據vite的import.meta.glob函數：就可以得到對應的custom_components資料夾下的.vue檔案

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

列印link#可以看到

最後就是非同步註冊元件

layouts.value = markRaw(defineAsyncComponent(link))

3.最後

下面貼出完整案例，僅供參考。有更好的或需要優化的可以提問一起探討。

<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>

以上是vue3動態載入元件及動態引入元件怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！