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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
AngularJs表单验证实例详解
May 30 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
探索node之事件循环的实现
Oct 30 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
php session处理的定制
2009/03/16 PHP
PHP session有效期问题
2009/04/26 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
理解PHP中的stdClass类
2014/04/18 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
js实现简单点赞操作
2020/03/17 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python如何实现异步调用函数执行
2019/07/08 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
列车长先进事迹材料
2014/01/25 职场文书
期末自我鉴定
2014/02/02 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
图书室标语
2014/06/21 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers