热搜：编程 Python Microsoft 编程语言 C++

vue 路由懒加载中给 Webpack Chunks 命名的方法

发布时间：2023-05-23 18:22:21 来源：网络

.

17、雨 "哗哗…… "地下起来，就像一个庞大的乐队在地上、空中、屋顶上演奏着秋的交响曲！行道树叶——梧桐叶也伴着秋雨在天空中飘荡，像几只飞舞的蝴蝶在天空中嬉戏！终于，它们飘累了，慢慢地落在了湿漉漉的水泥地上。远远的望去，就像是土地上的几朵小花，给寂寞的秋天增添了几分情趣！

最早的路由定义方式

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

进化版路由组件懒加载以及定义 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')
 }
]
...

这样写起来是完全没有问题的，但是路由很多的情况下，这里的代码量就会增加，我们能不能把「路径」与「组件」绑定的操作放大循环里面去做呢

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
})

这样就优雅了不少，但是我们的 chunk name 还没有加上去，这个时候就要用到 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 了