生产环境,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 赋值的方式刷新页面,那么这个地址会被前端路由拦截到。所以有效的办法是让浏览器先跳转到另外一个域名,再跳转回来。
生产环境,vue页面跳转的时候,js报404的问题的更多相关文章
- Vue页面跳转动画效果实现
Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d
- web页面找不到资源文件,报404,但是资源文件存在且路径没错
如题 , 今天遇到这个问题,maven项目导入本地myeclipse,正常跑起来之后,在web端存在部分页面资源加载不进来. 但是项目资源确实存在,一开始以为是myeclipse开发环境搭建错误导致, ...
- vue页面跳转以及传参和取参
vue中this.$router.push()路由传值和获取的两种常见方法 1.路由传值 this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法 ...
- VUE页面跳转方式
一.to +跳转路径 <router-link to="/">跳转到主页</router-link> <router-link :to="{ ...
- Web设计中打开新页面或页面跳转的方法 js跳转页面
Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...
- 微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json
微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app ...
- Vue页面跳转$router.push 的用法
vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon&qu ...
- vue - 页面跳转
HTML:a 小程序:navigator Vue:router-link 1. router-link => a标签 2. javascript标签跳转页面 2.1 2.2 3. 常用方法之 ...
- vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...
随机推荐
- 暑假第二弹:基于docker的hadoop分布式集群系统的搭建和测试
早在四月份的时候,就已经开了这篇文章.当时是参加数据挖掘的比赛,在计科院大佬的建议下用TensorFlow搞深度学习,而且要在自己的hadoop分布式集群系统下搞. 当时可把我们牛逼坏了,在没有基础的 ...
- jemter测试中常见的名词解析
1.响应时间(RT) 响应时间是指系统对请求做出响应的时间 2.吞吐量(TPS)[Throughput] 吞吐量是指系统在单位时间内处理请求的数量 3.并发用户数 并发用户数是指系统可以同时承载的正常 ...
- 如何参与flink开源项目
参与flink开源项目 https://flink.apache.org/how-to-contribute.html 1.回答社区问题 2.撰写bug报告 3.对于改进建议或新的特征 4.帮助别人并 ...
- easyui 菜单树搜索
//树形菜单搜索方法 function searchTree(treeObj,parentNode,searchCon){ var children; for(var ...
- python&JSONP(Jquery篇)
采用Jquery发送跨域请求: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 配置tensorflow和keras时教程及问题总结
基本参数:(如何基本参数和我的电脑不一致,有可能会出意外的错误) 操作系统:Windows 10,64位 Anaconda版本:Python 3.6版本.关于Anaconda的介绍.安装及使用教程可查 ...
- Python字符串的两种方式——百分号方式,format的方式
Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...
- rpmbuild analysis
- mysql 从一个表查询数据插入另一个表或当前表
mysql insert into 表明(uid,lng,lat) SELECT uuid,lng,lat FROM 表明
- docker简单介绍----docker仓库的应用
docker hub:主要用来存储docker镜像的仓库 docker默认提供了一个docker仓库,我们也可以自建私有仓库或者使用第三方的docker仓库来pull或者push镜像 这里我们以阿里云 ...