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

时间：2021-04-16 21:16:02 阅读：74 评论：0 收藏：0 [点我收藏+]

分析原因

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

解决办法

1.监听js文件是否引入失败，失败后重新刷新页面(window.reload或者location.href到要跳转的路由地址(通过router.beforeEach可以设置到全局)),这样js文件引入就会是最新的地址。

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

if (

!/SyntaxError/gi.test(error.message) ||

!/\/static_pc\/js\/\w+\.\w+\.js$/.test(error.filename) ||

!window.navigator.onLine

) {

return

}

console.warn(‘检测到有新版本发布, 自动刷新页面‘, error);

// autoRefreshFullpath为router.beforeEach里面拿到的to.fullpath

// location.reload()

location.href = window.autoRefreshFullpath

})

不同浏览器的报错不同，我只针对chrome和火狐做了判断。

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

原文：https://www.cnblogs.com/zerofan/p/14668317.html

踩

(0)

评论一句话评论（0）

分享档案

更多>