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 中指令v-bind動態(tài)綁定及與v-for結(jié)合使用詳解
這篇文章主要為大家介紹了Vue 中指令v-bind動態(tài)綁定及與v-for結(jié)合使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
手把手教你寫一個vue全局注冊的Toast的實現(xiàn)
本文主要介紹了手把手教你寫一個vue全局注冊的Toast的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了vue實現(xiàn)公告欄文字上下滾動效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue實現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
這篇文章主要介紹了vue實現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文將深入探討 Vue 組件樣式作用域的常見問題,并提供多種解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法
今天小編就為大家分享一篇axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue Element-ui 鍵盤事件失效的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue2使用TailwindCSS方法及遇到問題小結(jié)
Tailwind CSS是一個全新的、可定制的CSS框架,它提供了一系列的CSS類,用于構(gòu)建現(xiàn)代化的Web界面,這篇文章主要介紹了Vue2使用TailwindCSS方法及遇到問題小結(jié),需要的朋友可以參考下2024-03-03
Vue中安裝element-ui失敗問題原因及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01