生产环境,vue页面跳转的时候,js报404的问题

最近上线的一个vue项目,需要各种路由跳转,在开发和测试环境都没问题,但是在生产环境,发现后期更新代码的时候,有些机型(ios机型,暂未发现android有问题)跳转路由的时候,标题修改了,但是内容并没有显示。抓包后,发现跳转的时候,js文件报404。

在查阅资料后,找到了原因。因为怕影响首屏的加载速度,所以使用vue-router的懒加载机制,当用户刷新页面时,防止webpack打包后的js被缓存,会加一个哈希值,因此每次修改,会重新生成js文件名。但是用户大部分没有关机的习惯,因此更新代码后,手机本地浏览器缓存之前js文件的路径,但是远程服务器的js文件名已经修改成了新的文件名,旧的文件不再存在,因此跳转的时候请求的js文件就会出现404错误。

解决方案:

1)可以抓取路由的跳转错误,然后跳转另一个地址,再跳转回原页面,实现手动刷新。

  component: ()=>import("./home.vue").catch(err)

注意:在自动刷新的时候,不能使用 window.location.reload() 刷新。因为当浏览器抛出载入页面错误的时候,地址栏还没有更新地址。如果你利用给 window.location.href 赋值的方式刷新页面,那么这个地址会被前端路由拦截到。所以有效的办法是让浏览器先跳转到另外一个域名,再跳转回来。

上一篇:[转] 实时监听input输入的变化(兼容主流浏览器)


下一篇:监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法