vue-cli3与路由懒加载的坑

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。所以就要用到懒加载了

懒加载可以说是我经常用的了哈哈哈哈
于是最近在用vue-cli3做项目的时候就入坑了，虽然不习惯，但是vue-cli3相比之前更加灵活了！

言归正传，下边开始踩坑…

export const asyncRouterMap = [
  {
    path: '/about',
    name: 'about',
    meta: {
      // 标记需要登录
      auth: true,
      role: ['admin', 'user', 'superadmin']
    },
    component: () => import('./views/About.vue')
  },
  { path: '*', redirect: '/404', hidden: true }
]

按照这种方式写会发现刷新动态路由页面之后陷入了循环

此时此刻女生的第六感告诉我，肯定是vue-cli3的问题，于是开始刷文档（哈哈哈有问题就刷文档）

最后终于让我找到了问题所在，看下图

chainWebpack: config => {
    // 修改prefetch：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  },

将这段代码放到vue.config.js文件中再使用懒加载就没啥子问题咯！

解释一下prefetch：
prefetch空闲加载，
prefetch会在页面加载完成后，利用空闲时间提前加载获取用户未来可能会访问的内容。

至此前端小白踩坑结束…