vue2.0 router.addRoutes动态添加的路由,配置了懒加载但是无效?

路由分为静态路由和动态路由:

静态路由配置在 router/index.js 中:

{
  path: '/components/test',
  component: (resolve) => require(['@/views/test.vue'], resolve),
  hidden: true
}

动态路由是通过后端接口返回的数据生成的路由数组,遍历数组对象的 component ,通过 const loadView = (view) => { return (resolve) => require([@/views/${view}], resolve)},给路由配置动态组件。
router.beforeach 中,通过 router.addRoutes ,将配置好的动态路由传入

结果就是静态路由页面的懒加载有效,只加载当前页面使用到的js;
动态路由页面,通过js生成的懒加载代码就无效,依然全部加载了所有js

按照若依的修改,把require改为import,安装了插件,npm run dev可以运行,但是npm run build:prod就卡住了,无法打包:

// 静态路由
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect.vue'),
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error/404.vue'),
    hidden: true
  }]

export const loadView = (view) => { // 路由懒加载
  if (process.env.NODE_ENV === 'development') {
     return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}

正式环境打包直接内存溢出了,卡住崩溃了😂

阅读 4.1k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题