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

})