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**

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。