快捷導(dǎo)航

vue使用import.meta.glob動(dòng)態(tài)導(dǎo)入多個(gè)模塊方式

更新時(shí)間：2025年10月27日 09:31:53 作者：吃代碼長大的前端

文章介紹了Vite提供的`import.meta.glob`功能,用于動(dòng)態(tài)導(dǎo)入多個(gè)模塊,它通過glob模式匹配文件,返回一個(gè)對(duì)象,鍵為文件路徑,值為返回Promise的動(dòng)態(tài)導(dǎo)入函數(shù),支持eager模式直接導(dǎo)入和as選項(xiàng)指定導(dǎo)入方式,如原始字符串或文件URL,適用于Vite或Rollup項(xiàng)目

語法與參數(shù)

const modules = import.meta.glob(globPattern, options);

globPattern：

字符串或字符串?dāng)?shù)組，支持 glob 模式（如 './modules/*.js'）。

options（可選）：

eager：若為 true，直接導(dǎo)入模塊而非返回 Promise（默認(rèn) false）。
as：指定導(dǎo)入方式，如 'raw'（原始字符串）或 'url'（文件 URL）。

使用示例

動(dòng)態(tài)導(dǎo)入文件

匹配 src/features 下所有 .js 文件，按需加載：

const features = import.meta.glob('./src/features/*.js');  
for (const path in features) {  
  features[path]().then((module) => {  
    console.log(module.default);  
  });  
}

直接導(dǎo)入（eager 模式）

靜態(tài)加載所有匹配模塊：

const modules = import.meta.glob('./lib/*.js', { eager: true });  
console.log(modules['./lib/utils.js'].default);

導(dǎo)入為原始內(nèi)容

獲取文件原始字符串或 URL：

const rawFiles = import.meta.glob('./assets/*.txt', { as: 'raw' });  
const fileUrls = import.meta.glob('./images/*.png', { as: 'url' });

注意事項(xiàng)

僅適用于 Vite 或 Rollup 項(xiàng)目，需在構(gòu)建時(shí)確定模塊路徑。
動(dòng)態(tài)導(dǎo)入的模塊會(huì)代碼分割，生成獨(dú)立 chunk。
路徑需相對(duì)于當(dāng)前文件，且需包含擴(kuò)展名（如 .js）。

與import.meta.globEager的區(qū)別

Vite 4 已棄用 globEager，推薦使用 { eager: true } 選項(xiàng)替代。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue封裝一個(gè)右鍵菜單組件詳解(復(fù)制粘貼即可使用)
關(guān)于vue項(xiàng)目中會(huì)出現(xiàn)一些需求,就是右鍵菜單項(xiàng)的功能實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue封裝一個(gè)右鍵菜單組件(復(fù)制粘貼即可使用)的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue的data為啥只能是函數(shù)原理詳解
這篇文章主要為大家介紹了Vue的data為啥只能是函數(shù)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue.js簡單配置axios的方法詳解
axios是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了關(guān)于vue.js簡單配置axios的相關(guān)資料，需要的朋友們可以參考借鑒，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
vue3+ts使用Echarts的實(shí)例詳解
這篇文章主要介紹了vue3+ts使用Echarts的實(shí)例詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
vue elementUI 表單校驗(yàn)的實(shí)現(xiàn)代碼（多層嵌套）
這篇文章主要介紹了vue elementUI 表單校驗(yàn)的實(shí)現(xiàn)代碼（多層嵌套），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
使用vite構(gòu)建vue3項(xiàng)目的實(shí)現(xiàn)步驟
通過本文,您可以了解如何使用Vue CLI創(chuàng)建Vue 3項(xiàng)目,配置Vite,利用其優(yōu)勢(shì)進(jìn)行開發(fā),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08
vue3中如何通過ref和$parent結(jié)合defineExpose實(shí)現(xiàn)父子組件之間的通信
這篇文章主要介紹了vue3中通過ref和$parent結(jié)合defineExpose實(shí)現(xiàn)父子組件之間的通信,Vue3中通過ref和$parent的結(jié)合使用，及defineExpose的方法，可以非常便捷地實(shí)現(xiàn)父子組件之間的通信，需要的朋友可以參考下
2023-07-07
element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能及思路
這篇文章主要介紹了element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能，實(shí)現(xiàn)思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個(gè)屬性也是 element 上的一個(gè)參數(shù)，意思為是否開啟折疊動(dòng)畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起，需要的朋友可以參考下
2023-01-01
Vue批量更新dom的實(shí)現(xiàn)步驟
本文將結(jié)合實(shí)例代碼，介紹Vue批量更新dom的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-07-07
nuxt.js寫項(xiàng)目時(shí)增加錯(cuò)誤提示頁面操作
這篇文章主要介紹了nuxt.js寫項(xiàng)目時(shí)增加錯(cuò)誤提示頁面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11