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


Posted in Javascript onApril 24, 2020

最早的路由定义方式

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 了

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

到此这篇关于在 vue 路由懒加载中给 Webpack Chunks 命名的文章就介绍到这了,更多相关vue 路由懒加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 #Javascript
基于Vue实现微前端的示例代码
Apr 24 #Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 #Javascript
小程序开发之模态框组件封装
Apr 23 #Javascript
详解Vue3中对VDOM的改进
Apr 23 #Javascript
微信小程序实现滑动操作代码
Apr 23 #Javascript
微信小程序图片右边加两行文字的代码
Apr 23 #Javascript
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
动态生成gif格式的图像要注意?
2006/10/09 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JS求平均值的小例子
2013/11/29 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
vue实现图片上传功能
2020/05/28 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python常见排序算法基础教程
2017/04/13 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python sorted排序方法如何实现
2020/03/31 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
毕业生教师求职信
2013/10/20 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
项目建议书
2015/02/04 职场文书
百年校庆感言
2015/08/01 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL