vue2路由表中异步加载组件命名方式
更新时间：2024年06月29日 16:49:33 作者：沐沐茶壶
这篇文章主要介绍了vue2路由表中异步加载组件命名方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue2路由表中异步加载组件命名
在Vue2中，路由表中引入组件时，可以使用动态导入（Dynamic Import）的方式来异步加载组件，以提升页面加载速度和降低初始加载的体积。
在这种方式下，会配合这种注释 /* webpackChunkName: “” / 来对异步加载的组件进行命名。
关于异步加载的组件命名的解释
一、为什么需要使用组件命名
首先，明确一点，如果不使用组件命名不会有什么影响，可以正常进行项目打包，但是webpack将组件打包成一个单独的chunk文件后，该文件会被默认命名为一个数字；这样会影响开发者在调试时无法提供组件包名去定位问题。
同时，这种命名还可以帮助webpack在打包时进行代码分割，也就是将不同的组件打包成不同的chunk文件，以达到更好的性能优化效果。
因此，使用了注释/* webpackChunkName: “” /，也就是组件命名后，webpack会将打包的chunk文件命名为我们自己定义的名称，一般这个名称与我们的组件名称一样，可以方便开发者在调试时定位问题；其次，可以帮助webpack进行代码分割，提高页面加载速度，降低初始加载的项目体积。
二、如何使用组件命名
// ...
const router = new Router({
routes: [
{
path: '/home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
meta: { title: '首页' },
}
]
})
// ...上面示例中，在路由路径为home的路由中，动态加载对应的页面组件，在import里面添加了组件命名。
vue路由动态异步解析错误
报错
问题
92行报错因为异步加载动态组件，需要解析文件路径，在vue打包中，会把 @/ 这种路径转为相对路径，但是动态组件的话，是打包后，生产环境中是无法解析 @/ 这种语法路径，所以会报错。
解决
把需要异步加载的组件按93行或者94行形式
例如：
return () => import(@/views/${this.compName}.vue)打包后，会提前解析**@/views和@/components**
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
功能比较简单，在单一html中使用vue.js分页展示数据，并未安装脚手架，或使用相关UI框架，此时需要手写一个分页器，不失为最合理最便捷的解决方案,需要的朋友可以参考下2020-11-11
组件是可以在自己的模板中调用自身的,不过他们只能通过name选项来做这件事,下面这篇文章主要给大家介绍了关于vue3递归组件封装的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Vue如何动态给id设置style样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue router进行路由跳转并携带参数的实例详解(params/query)
在使用`router.push`进行路由跳转到另一个组件时，可以通过`params`或`query`来传递参数，这篇文章主要介绍了vue router进行路由跳转并携带参数（params/query）,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue3的ref是如何实现响应式的,我们讲了ref是如何实现响应式的,主要分为两种情况：ref接收的是number这种原始类型、ref接收的是对象这种非原始类型,需要的朋友可以参考下2024-07-07
我们在使用vue 脚手架时，为了规范团队的代码格式，会有一个代码规范检测，如果不符合规范就会报错，有时候我们不想按照他的规范去写。这时我们需要关闭,这里脚本之家小编给大家带来了去掉vue 中的代码规范检测两种方法(Eslint验证)，一起看看吧2018-03-03
这篇文章主要介绍了如何使用 vue + d3 画一棵树,本文通过文字说明加代码分析的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要为大家介绍了Vue 事件处理函数的绑定示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
很多时候我们需要从本地读取JSON文件里面的内容,这篇文章主要给大家介绍了关于vue项目如何读取本地json文件数据的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue/cli和vue版本对应及安装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论