vue3動態載入元件及動態引入元件怎麼使用-Vue.js-PHP中文網

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

王林

發布： 2023-05-11 12:01:14

轉載

3296 人瀏覽過

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

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

根據上面的報錯提示，讓我們安裝並使用：@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檔

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

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

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

登入後複製

列印link#可以看到

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

最後就是非同步註冊元件

layouts.value = markRaw(defineAsyncComponent(link))

登入後複製

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

登入後複製

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

php8，我來也