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()
})