vue 路由懶加載中給 Webpack Chunks 命名的方法
更新時(shí)間：2020年04月24日 09:29:30 作者：huangyao_0606
這篇文章主要介紹了在 vue 路由懶加載中給 Webpack Chunks 命名的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
最早的路由定義方式
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
{ path: '/login', name: 'Login', component: Login }
]
const router = new VueRouter({
routes
})
export default router
進(jìn)化版路由組件懶加載以及定義 chunk name
...
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../views/Login.vue')
}
]
...
這樣寫起來是完全沒有問題的，但是路由很多的情況下，這里的代碼量就會(huì)增加，我們能不能把「路徑」與「組件」綁定的操作放大循環(huán)里面去做呢
const routeOptions = [
{ path: '/', name: 'Home' },
{ path: '/about', name: 'About' },
{ path: '/login', name: 'Login' }
]
const routes = routeOptions.map(route => {
return {
...route,
component: () => import(`@/views/${route.name}.vue`)
}
})
const router = new VueRouter({
routes
})
這樣就優(yōu)雅了不少，但是我們的 chunk name 還沒有加上去，這個(gè)時(shí)候就要用到 webpack 2.6.0 以上的占位符[ index ]和[ request ]
const routeOptions = [
{ path: '/', name: 'Home' },
{ path: '/about', name: 'About' },
{ path: '/login', name: 'Login' }
]
const routes = routeOptions.map(route => {
return {
...route,
component: () => import(/* webpackChunkName: "[request]" */ `../views/${route.name}.vue`)
}
})
const router = new VueRouter({
routes
})
build 一下就能看到想要的 chunk 了
到此這篇關(guān)于在 vue 路由懶加載中給 Webpack Chunks 命名的文章就介紹到這了,更多相關(guān)vue 路由懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能案例分析
這篇文章主要介紹了Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能,本文通過案例代碼講解的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能(完整代碼)
驗(yàn)證碼功能在我們的身邊用處極廣，今天小編給大家分享基于vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能,感興趣的朋友跟隨小編一起看看吧2019-12-12
本文詳細(xì)講解了vue3獲取當(dāng)前路由地址的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
手把手搭建安裝基于windows的Vue.js運(yùn)行環(huán)境
手把手教大家搭建安裝基于windows的Vue.js的運(yùn)行環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果,從而達(dá)到顯示計(jì)時(shí)器滾動(dòng)效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-02-02
這篇文章主要介紹了用vue快速開發(fā)app的腳手架工具，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue使用localStorage存儲(chǔ)數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue使用localStorage存儲(chǔ)數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Vue3?使用Element?Plus表格單選帶checkbox功能
這篇文章主要介紹了Vue3?使用Element?Plus表格單選帶checkbox,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-11-11