在做一個用vite構建的vue3專案時，動態拉取導入.vue頁面，然後控制台一直有以下提示，頁面也無法渲染出來。
根據上面的報錯提示，讓我們安裝並使用：@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))
下面貼出完整案例，僅供參考。有更好的或需要優化的可以提問一起探討。
<template>
<div @click="changeComponents('kk')">显示kk.vue</div>
<div @click="changeComponents('index')">显示index.vue</div>
<component :is="layouts"/>
</template>
<script lang='ts' setup>
const modules = import.meta.glob('../custom_components/*.vue');
let layouts = ref<any>(null)
const changeComponents = (e:string)=>{
const link = modules[`../custom_components/${e}.vue`]
layouts.value = markRaw(defineAsyncComponent(link))
}
</script>以上是vue3動態載入元件及動態引入元件怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
