vue 路由懶加載中給 Webpack Chunks 命名的方法
最早的路由定義方式
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') } ] ...
這樣寫(xiě)起來(lái)是完全沒(méi)有問(wèn)題的,但是路由很多的情況下,這里的代碼量就會(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 還沒(méi)有加上去,這個(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中使用Canvas實(shí)現(xiàn)繪制二維碼
這篇文章主要為大家詳細(xì)介紹了如何在Vue中使用Canvas實(shí)現(xiàn)繪制二維碼,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2007-02-02vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下2018-06-06apache和nginx下vue頁(yè)面刷新404的解決方案
這篇文章主要介紹了apache和nginx下vue頁(yè)面刷新404的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下2021-01-01解決vue無(wú)法偵聽(tīng)數(shù)組及對(duì)象屬性的變化問(wèn)題
這篇文章主要介紹了解決vue無(wú)法偵聽(tīng)數(shù)組及對(duì)象屬性的變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07