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
官方入口:點(diǎn)我

具體方法:
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)) {
//名稱 因?yàn)檫@里拿到的是 ./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é)合使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
手把手教你寫一個vue全局注冊的Toast的實(shí)現(xiàn)
本文主要介紹了手把手教你寫一個vue全局注冊的Toast的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue實(shí)現(xiàn)公告欄文字上下滾動效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)公告欄文字上下滾動效果的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
這篇文章主要介紹了vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法
今天小編就為大家分享一篇axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue2使用TailwindCSS方法及遇到問題小結(jié)
Tailwind CSS是一個全新的、可定制的CSS框架,它提供了一系列的CSS類,用于構(gòu)建現(xiàn)代化的Web界面,這篇文章主要介紹了Vue2使用TailwindCSS方法及遇到問題小結(jié),需要的朋友可以參考下2024-03-03

