vite動(dòng)態(tài)導(dǎo)入頁面動(dòng)態(tài)import組件實(shí)現(xiàn)方式
更新時(shí)間：2026年04月29日 09:19:18 作者：yangliweigauguagua
本文總結(jié)了在使用Vite進(jìn)行動(dòng)態(tài)導(dǎo)入頁面和組件時(shí)遇到的問題,由于Vite與Webpack在處理動(dòng)態(tài)import方面有所不同,需要采用特殊方法,文章強(qiáng)調(diào)了從后臺(tái)獲取路由表并動(dòng)態(tài)引入組件的實(shí)踐方法
vite動(dòng)態(tài)導(dǎo)入頁面動(dòng)態(tài)import組件
在做權(quán)限的時(shí)候
從后臺(tái)拉路由表，然后動(dòng)態(tài)引入組件，之前webpack是可以直接用的，但是vite不行，需要用特殊的方法
//引入所有views下.vue文件
const modules = import.meta.glob("../views/**/**.vue");
/**
* 解析路由表
* @param routerMap 后臺(tái)請求的路由表
* @returns 系統(tǒng)路由
*/
export const routerFilterFunc = (routerMap: RouterItem[]) => {
const arr: RouterItem[] = [];
routerMap.forEach(item => {
const obj: RouterItem = {
...item,
beforeComponent: item.component
};
if (obj.children) {
obj.children = routerFilterFunc(obj.children);
}
if (item.component == "Layout") {
obj.component = RouterView;
} else {
const component = modules[`../views/${obj.component}.vue`] as any;
if (component) {
obj.component = modules[`../views/${obj.component}.vue`];
} else {
obj.component = () => import("@/views/404.vue");
}
}
arr.push(obj);
});
return arr;
};
這是
import.meta.glob("../views/**/**.vue")獲取的內(nèi)容
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3在css中使用v-bind綁定js/ts變量(在scss和less中使用方式)
v-bind是Vue.js中的一個(gè)核心指令,用于在Vue組件或DOM元素上綁定數(shù)據(jù)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3在css中使用v-bind綁定js/ts變量的相關(guān)資料,也可以在scss和less中使用方式,需要的朋友可以參考下2024-04-04
vue3實(shí)現(xiàn)按鈕級別權(quán)限控制的兩種方法
本文給大家介紹vue3實(shí)現(xiàn)按鈕級別權(quán)限控制的兩種方法,每種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-08-08
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法，需要傳什么值，返回值是什么類型一目了然，這篇文章主要介紹了Vue-cli3中使用TS語法示例代碼,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vuex及其使用方法，感興趣的同學(xué)，可以參考下2021-04-04
vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能（流程詳解）
無論是移動(dòng)端還是pc端登錄或者注冊界面都會(huì)見到手機(jī)驗(yàn)證碼登錄這個(gè)功能，輸入手機(jī)號，得到驗(yàn)證碼，這篇文章主要介紹了基于vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能,需要的朋友可以參考下2019-12-12
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單的跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
學(xué)習(xí)過vue2的寶子們肯定知道,組件傳值是vue項(xiàng)目開發(fā)過程中必不可少的功能場景,下面這篇文章主要給大家介紹了關(guān)于vue3中組件傳值的多種方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動(dòng)格式化問題，對vscode 開發(fā)uniapp的相關(guān)知識(shí)感興趣的朋友一起看看吧2021-08-08
vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機(jī)端web(實(shí)現(xiàn)過程)
vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能,包括PC端,手機(jī)端和企業(yè)微信自建應(yīng)用端,本文通過實(shí)例代碼介紹vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機(jī)端web,感興趣的朋友跟隨小編一起看看吧2024-08-08