Uncaught (in promise) ChunkLoadError: Loading chunk 28 failed.

最新推荐文章于 2025-03-27 16:13:47 发布

Yue Qin

最新推荐文章于 2025-03-27 16:13:47 发布

阅读量9k

点赞数 2

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_41241310/article/details/118769898

版权

前端专栏收录该内容

4 篇文章

订阅专栏

在尝试使用Vue动态加载菜单时遇到了ChunkLoadError，问题源于懒加载组件与history路由模式的不兼容。通过将router中的history模式更改为默认的hash模式，成功解决了报错，程序得以正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在使用vue动态加载菜单，报了这个错：

Uncaught (in promise) ChunkLoadError: Loading chunk 28 failed.
(missing: http://localhost:8080/sal/js/28.js)
    at Function.requireEnsure [as e] (app.js:896)
    at Function.fn.e (app.js:177)
    at component (menu.js?2971:47)
    at eval (vue-router.esm.js?8c4f:2144)
    at eval (vue-router.esm.js?8c4f:2171)
    at Array.map (<anonymous>)
    at eval (vue-router.esm.js?8c4f:2171)
    at Array.map (<anonymous>)
    at flatMapComponents (vue-router.esm.js?8c4f:2170)
    at eval (vue-router.esm.js?8c4f:2106)

我的菜单menu.js如下：

import {getRequest} from './api'  
export const initMenu = (router,store) => {  
    if(store.state.routes.length > 0 ){  
        return;
    }
    getRequest("/system/cfg/getMenu").then(data => {  //如果routes为空，则初始化菜单
       if(data){
          
           let fmtRoutes = formatRoutes(data.obj);  //格式化router
           for(var i = 0 ; i < fmtRoutes.length ; i += 1 ){
               const route = fmtRoutes[i];
               router.addRoute(route)
           }
           //router.addRoutes(fmtRoutes); //添加到路由 addRoutes已经废弃
           store.commit('initRoutes',fmtRoutes); //将数据存入vuex
       }
    })

}
export const formatRoutes = (routes) => {
    let fmtRoutes = [];
    routes.forEach((router) => {
        let  {       //将返回的对象封装(定义匿名对象，并将router的值赋给它)
            path,
            component,
            name,
            iconCls,
            children
        } = router;

        if(children && children instanceof Array){
            children = formatRoutes(children);
        }
        let fmRouter = {       //temp对象
            path:path,
            name:name,
            iconCls:iconCls,
            children:children,
            component(resolve){    //等效于component: function conponent(resolve){},通过函数获取值
                if(component.startsWith('Home')){
                    require(['../view/' + component +'.vue'],resolve);
                }else if(component.startsWith('Emp')){
                    require(['../view/emp/' + component +'.vue'],resolve);
                }else if(component.startsWith('Per')){
                    require(['../view/per/' + component +'.vue'],resolve);   
                }else if(component.startsWith('Sal')){
                    require(['../view/sal/' + component +'.vue'],resolve); 
                }else if(component.startsWith('Sta')){
                    require(['../view/sta/' + component +'.vue'],resolve);    
                }else if(component.startsWith('Sys')){
                    require(['../view/sys/' + component +'.vue'],resolve);
                }
                
            }
        }
        fmtRoutes.push(fmRouter);
    });
    return fmtRoutes;
}