Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題
需求
當(dāng)我們?cè)陂_發(fā)過程中，需要引入很多的文件，但是又不想每個(gè)文件都依次導(dǎo)入的時(shí)候 就會(huì)想有沒有一個(gè)方法可以批量導(dǎo)入 require.context方法就可以解決這個(gè)問題.(僅限于webpack）
function importAll (require) {
console.log(require.keys(),'keys') // 此處是由多個(gè)文件路徑組成的數(shù)組
require.keys().forEach(item=>{
routerAll.push(require(item).default)
})
console.log(routerAll,'routerALL') // 將文件的 export default 暴露出去
}
importAll(require.context('./',true,/\.js/))let routerAll = []；
function importAll (require) {
console.log(require.keys(),'keys') // 此處是由多個(gè)文件路徑組成的數(shù)組
require.keys().forEach(item=>{
routerAll.push(require(item).default)
})
console.log(routerAll,'routerALL')
}
importAll(require.context('./',true,/\.js/))代碼詳解
require.context
require.context(deirectory,useSubdirectories,regExp)
1.directory:要查找的文件路徑(String)
2.userSubdirectories:是否查找子目錄（Boolean)
3.regExp:要匹配文件的正則
require.context.keys()
const ctx = require.context('./components/', true, /\.js$/)
console.log(ctx.keys())
// ["./A.js", "./B.js", "./C.js", "./D.js"]
require.context.keys()返回一個(gè)數(shù)組，數(shù)組每個(gè)元素傳入 require.context方法中，就可以到處相應(yīng)的文件
借鑒了Store 的自動(dòng)化引入
當(dāng)然此方法也可以應(yīng)用到別的文件
在 main.js 中引入大量公共組件
import Vue from 'vue'
// 自定義組件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印結(jié)果
// 遍歷出每個(gè)組件的路徑
requireComponents.keys().forEach(fileName => {
// 組件實(shí)例
const reqCom = requireComponents(fileName)
// 截取路徑作為組件名
const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
// 組件掛載
Vue.component(reqComName, reqCom.default || reqCom)
})今天的分享就到這里 希望能對(duì)你有所幫助。
以上就是Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題的詳細(xì)內(nèi)容，更多關(guān)于Vue-routert引入導(dǎo)致index臃腫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解關(guān)于vue2.0工程發(fā)布上線操作步驟
這篇文章主要介紹了詳解關(guān)于vue2.0工程發(fā)布上線操作步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
使用Vue-cli3.0創(chuàng)建的項(xiàng)目 如何發(fā)布npm包
這篇文章主要介紹了使用Vue-cli3.0創(chuàng)建的項(xiàng)目，如何發(fā)布npm包,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
Vue.js中動(dòng)態(tài)更改svg的相關(guān)屬性詳解
這篇文章主要為大家介紹了Vue.js中動(dòng)態(tài)更改svg的相關(guān)屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue實(shí)現(xiàn)路由嵌套的方法實(shí)例
嵌套路由顧名思義就是路由的多層嵌套,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)路由嵌套的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
vue element-ui使用required進(jìn)行表單校驗(yàn)時(shí)自定義提示語(yǔ)問題
這篇文章主要介紹了vue element-ui使用required進(jìn)行表單校驗(yàn)時(shí)自定義提示語(yǔ)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3?使用v-model實(shí)現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實(shí)現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了vue之Element-Ui輸入框顯示與隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
一篇看懂vuejs的狀態(tài)管理神器 vuex狀態(tài)管理模式