vue3+vite中使用import.meta.glob的操作代碼
更新時間：2022年11月24日 15:59:38 作者：浩星
在vue2的時候，我們一般引入多個js或者其他文件，一般使用? require.context 來引入多個不同的文件，但是vite中是不支持 require的，他推出了一個功能用import.meta.glob來引入多個，單個的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下
前言：
在vue2的時候，我們一般引入多個js或者其他文件，一般使用 require.context 來引入多個不同的文件，但是vite中是不支持 require的，他推出了一個類似的功能，就是用import.meta.glob來引入多個，單個的文件。 這里說說他們的對比和區(qū)別： vue2 中使用 require 來引入多個不同的js文件
1、引入 modules 下的所有的js文件
const modulesFiles = require.context('./modules', true, /\.js$/)2、循環(huán)，拿到每個js文件的名稱和js返回的具體內(nèi)容
modulesFiles.keys().reduce((modules, modulePath) => {
// 名稱：從 './app.js' 取到 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
// 內(nèi)容，每個js中export default 返回的內(nèi)容
const value = modulesFiles(modulePath)
}, {})vue3中使用 import.meta.glob
官方入口：點我
具體方法：
1、引入 modules下面的所有的js文件
const modulesFiles = import.meta.glob('./modules/*.js',{ eager: true }); // 異步方式2、拿到具體文件名稱和文件內(nèi)容
let modules = {}
for (const [key, value] of Object.entries(modulesFiles)) {
//名稱 因為這里拿到的是 ./modules/app.js ，所以需要兩層處理
var moduleName = key.replace(/^\.\/(.*)\.\w+$/, '$1');
const name = moduleName.split('/')[1]
//具體的內(nèi)容，都是每個js中返回值 value.default
modules[name] = value.default
}到此這篇關(guān)于vue3+vite中使用import.meta.glob的文章就介紹到這了,更多相關(guān)vue3使用import.meta.glob內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue 解決mintui彈窗彈起來,底部頁面滾動bug問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中動態(tài)修改img標(biāo)簽中src的方法實踐
本文主要介紹了vue中動態(tài)修改img標(biāo)簽中src的方法實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片預(yù)覽組件封裝與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了如何Vue利用實現(xiàn)實時刷新時間的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以了解下2023-12-12
vue-element-admin如何設(shè)置默認(rèn)語言
這篇文章主要介紹了vue-element-admin如何設(shè)置默認(rèn)語言，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解vue-cli快速構(gòu)建項目以及引入bootstrap、jq
本篇文章主要介紹了vue-cli快速構(gòu)建項目以及引入bootstrap、jq，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
今天我們將利用vue的條件指令來完成一個簡易的動態(tài)變色功能按鈕,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)下載文件流完整前后端代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
在Vue中,有多種方式可以實現(xiàn)模糊查詢,這篇文章主要介紹了5種vue中的常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08