vue项目重新部署后导致部署前打开的页面跳转其他路由无效失败

分析原因

vue打包后js文件会带有hash值，重新部署后，之前js替换为最新打包的js，就导致切换路由等一些需要引入项目打包拆分出来的js文件时会请求不到资源，导致跳转失效等问题。

解决办法

1.重新去请求报错的地址如果返回的类型是404则作出跳转，这时候addEventListener第三个参数设置为true，通过e.target.src可以获取到报错地址，然后axios去请求获取code作出判断。我们项目中没有这么做，因为运维那边没有返回404code,而是返回一个状态码为200的404html文件，必须要报错才行，不然会抓取不到（心累，其实这里可以通过返回的content-type去判断，如果不是js就执行刷新或location.href。）

import axios from axios

window.addEventListener('error', (e) => {

　　const target = e && e.target && e.target.src

　　if(target) {

　　axios.get(taret).then((res)=>{

　　　console.log(res)}).catch((err) => {console.log(err);})

}

}， true)

2. 通过vue-router的router.onError事件监听https://blog.csdn.net/weixin_39228870/article/details/107053991?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

但是只能监听路由js的报错，自定义的懒加载文件报错会抓取不到，因为不是路由跳转间的错误。可以配合方案1一起使用

如果有其他的解决方法，请指教！！

追加：今天看到了一个新的写法，补上

function refresh () {

window.location.reload()

}

window.addEventListener('error', (error) => {

if (!/SyntaxError/gi.test(error?.message) || !window.navigator.onLine) return

refresh()

})