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**
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue报错:Injection "xxxx" not found的解决办法
这篇文章主要给大家介绍了关于Vue报错:Injection "xxxx" not found的解决办法,文中通过图文将解决的办法介绍的非常详细,对大家的学习具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue拿到二进制流图片如何转为正常图片并显示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue3.0基于views批量实现动态路由的方法(示例代码)
以前vue项目中也有很多实现动态路由的方法,比如有一些项目涉及权限的可能会使用api请求路由数据在来createRouter,或者本地构建使用routes.push来动态构建路由, 今天介绍一种新的方式来基于某个文件夹批量构建动态路由的方法,感兴趣的朋友一起看看吧2024-12-12
这篇文章主要为大家详细介绍了vue实现分页的三种效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了利用Vue实现数字翻滚动画效果,通过Vue的响应式数据更新结合CSS3的动画效果,我们可以实现非常酷炫的数字翻滚效果,给数据可视化带来更多动感和吸引力,需要的朋友参考下吧2024-04-04
这篇文章主要介绍了Sublime Text新建.vue模板并高亮(图文教程)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
我们都知道跨域是同源策略导致的,域名不同、协议不同、端口号不同任意一种情况都会导致跨域,这篇文章主要介绍了从Vue到Postman全面验证API接口跨域问题,需要的朋友可以参考下2024-08-08
这篇文章主要介绍的是如何用Vue做一个简单的随机点名册，主要是做个简单的点名器，不做样式,需要的朋友可以参考一下，希望对你有所帮助2021-12-12
本文介绍了如何在项目中创建和使用自定义插件,以在构建过程中检查版本号,具体步骤包括在项目根目录下创建buildLifeHook.ts文件,并在public目录下创建version文件夹,然后在vite.config.ts中引用该插件,并在src/utils目录下创建XxzUtils.ts文件2024-12-12
最新评论