美文网首页
记一次vue history模式下的报错ChunkLoadErr

记一次vue history模式下的报错ChunkLoadErr

作者: 夜雨渐停丶我独行 | 来源:发表于2020-09-01 11:47 被阅读0次

    报错截图如下


    image.png

    网上有答案说在路由文件上加下面配置解决,不过并不能解决我的问题,可能有各种因素影响。。。

    const originalPush = Router.prototype.push
    Router.prototype.push = function push(location) {
        return originalPush.call(this, location).catch((err) => { return err })
    }
    

    经过测试是因为vue项目中使用了history模式,并且项目中使用了路由懒加载,路由跳转第一个没问题,第二个就404了。
    解决方案一:不使用history模式(呵呵哒,今天我胖虎要打屎你)
    显然第一种方案不是很妥当。。。
    解决方案二:使用history,不使用路由懒加载,但是刷新页面凉凉
    方案二是勉强可以,但是大人,食大便了,我要history,还要路由懒加载,OK?OK,就有了下面的方案三
    明显看出来页面刷新后就404了,是不是webpack服务没有设置公共路径的问题,经过我的尝试发现确实是因为webpack publicPath设置的问题
    devServer

      devServer: {
        publicPath: '/', // 公共路径 打包后资源可以访问的路径
      },
    

    output

        output: { // 出口文件
            path: __dirname + "/dist", // 打包后存放的地方
            filename: "bundle.js", // 打包后的文件命名
            publicPath: '/'
        }
    

    重要的事情说三次

    devServer和output文件的publicPath要统一
    devServer和output文件的publicPath要统一
    devServer和output文件的publicPath要统一

    好了,到这里路由使用history+路由懒加载导致页面404问题就完美解决了,希望可以帮到各位小伙伴

    相关文章

      网友评论

          本文标题:记一次vue history模式下的报错ChunkLoadErr

          本文链接:https://www.haomeiwen.com/subject/rutvsktx.html