vue-cli 3.x 路由懒加载报错

  {
      path: '/',
      name: '首页',
      component:() =>import(/* webpackChunkName: "home" */ "./views/Home.vue"),
      children: [
        {
          path: 'assets',
          name: '资产',
          component: () =>import(/* webpackChunkName: "assets" */ "./views/assets/Assets.vue"),
          children:[
            {path: 'record',name: '提现记录',component: () =>import(/* webpackChunkName: "record" */ "./views/assets/Record.vue")},

          ]
        },

使用了嵌套路由,突然出现这种情况

Uncaught TypeError: (intermediate value)(intermediate value).push is not a function

Error: Loading chunk record failed.

图片描述

vue.config.js 的 配置

module.exports = {
  baseUrl:"./",
  // assetsDir:"static", //资源文件放入static目录
  lintOnSave:false,//是否使用eslint
  productionSourceMap:false,
  devServer:{
    open:true,
  },
  transpileDependencies: [
    'webpack-dev-server/client',
  ]
}

完整路由配置

const router = new Router({
  routes: [
    {path: '*',name: '',redirect: '/index'},
    // 账户资料模块
    {
      path: '/',
      name: '首页',
      component:() =>import(/* webpackChunkName: "0" */ "./views/Home.vue"),
      children: [
        {path: 'index',name: '页面首页',component: () =>import(/* webpackChunkName: "1" */ "./views/Index.vue")},
        {path: 'order',name: '订单记录',component: () =>import(/* webpackChunkName: "2" */ "./views/Order.vue")},
        {
          path: 'assets',
          name: '资产',
          component: () =>import(/* webpackChunkName: "3" */ "./views/assets/Assets.vue"),
          children:[
            {path: 'index',name: '资产首页',component: () =>import(/* webpackChunkName: "4" */ "./views/assets/Index.vue")},
            {path: 'withdrawal',name: '提现',component: () =>import(/* webpackChunkName: "5" */ "./views/assets/Withdrawal.vue")},
            {path: 'record',name: '提现记录',component: () =>import(/* webpackChunkName: "6" */ "./views/assets/Record.vue")},
            {path: 'details',name: '账单明细',component: () =>import(/* webpackChunkName: "7" */ "./views/assets/Details.vue")},
            {path: 'recordDetails',name: '提现详情',component: () =>import(/* webpackChunkName: "8" */ "./views/assets/RecordDetails.vue")},
          ]
        },
        {
          path: 'account',
          name: '账户中心',
          component: () =>import(/* webpackChunkName: "9" */ "./views/account/Account.vue"),
          children:[
            {path: 'index',name: '账户中心首页',component: () =>import(/* webpackChunkName: "10" */ "./views/account/Index.vue")},
          ]
        },
      ]
    },
  ]
});

问题出现场景

例如
'/assets/withdrawal' 跳转到 '/assets/record' 出现上诉错误
'/assets/withdrawal' 跳转到 '/account/index' 出现上诉错误

一个很奇怪的加载情况,0,1,2,3,4.js 都正常进入路由了,然后我进入和4一样的子路由5的时候,加载5.js的同时加载了一个vendors~10~5.js 和 10~5.js...但是5对应的路由也正常进入了,然后我访问和5一样的6.js对应的路由就出现了上面说的错误

为什么会加载 vendors~10~5.js 和 10~5.js 这样的js
图片描述

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