对于vue项目更新迭代导致上传至服务器后出现Loading chunk {n} failed和Unexpected token <的解决方式

相信大家对于vue项目的维护与更新中会遇见很多问题，其中有两种情况最为常见。

一种是Loading chunk {n} failed，这种情况出现的原因是vue页面更新上传至服务器后，由于vue默认打包会对有改动的页面进行重新的编译和hash命名，而服务器上文件名称和浏览器缓存文件名称不一致，浏览器没有更新文件导致找不到服务器上的文件，从而报错。

另一种是Unexpected token <，这种情况出现的原因是vue的组件vue文件(不是页面文件）更新，出现和第一种情况一样的情况，其实归根到底就是浏览器的缓存文件名称和你更新过后服务器上的文件名称不一致导致的。

 

解决办法：由于两种情况出现的原因大致一致，我就不单独写解决方式了

1.首先利用vueRouter的onError路由执行错误监控函数，监控Loading chunk {n} failed的报错，一旦监控到报错就让浏览器重新加载网址，从而达到刷新重新加载文件的目的。代码如下：

router.onError((error) => {//路由执行过程中的错误监控
    const pattern = "Loading chunk";
    const isChunkLoadFailed = error.message.match(pattern);//匹配报错信息中是否包含Loading chunk
    if (!isChunkLoadFailed) {
        window.location.href ="网站域名" + router.history.pending.fullPath;//重新加载在接收到报错之前要去往的路由
    } else {
        console.log(error);
    }
});

 

2.这已经解决了第一种Loading chunk {n} failed的情况，但是对于第二中出现的Unexpected token <用vueRouter的onError函数却是监控不到，于是采用迂回战术，给webpack输出chunk文件时加上时间戳，这样一旦更新，所有的chunk文件都会被改变，也就成功的将第二种错误引导至了第一种错误。代码如下：

a.对于vue_cli版本3以下的vue项目，直接修改webpack.config.js中的output配置即可

const times = new Date().getTime();
module.exports = {
    ...其他配置
    output:{
    filename: "js/[name].[hash]." + times + ".js",
    chunkFilename: "js/[name].[hash]." + times + ".js",
    }
    ...其他配置  
}

 

b.对于vue_cli版本3及以上的vue项目，需要自行在项目的根目录(与package.json同级)下添加vue.config.js文件，修改其中的output配置

const times = new Date().getTime();
module.exports = {
    ...其他配置
    configureWebpack: {
    output: {
        filename: "js/[name].[chunkhash]." + times + ".js",
        chunkFilename: "js/[name].[chunkhash]." + times + ".js",
    },
    }
    ...其他配置
}

到了此处其实上面的两种错误就已经可以解决了。

初来乍到，如果有帮助到你还请麻烦点个关注，点个关注。如果有大佬有更好的解决办法，还请和在下分享，感激涕零，感恩戴德！