生产环境，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 赋值的方式刷新页面，那么这个地址会被前端路由拦截到。所以有效的办法是让浏览器先跳转到另外一个域名，再跳转回来。