生产环境,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 ...
随机推荐
- Cmake出现CMake Error: Could not find CMAKE_ROOT !!!
试了很多方式, 其实只需要这一句话!!!!!! hash -r
- mysqldump 备份数据和恢复
命令行下具体用法如下: mysqldump -u用戶名 -p密码 -d 数据库名 表名 > 脚本名; 一.导出数据: 导出整个数据库结构和数据mysqldump -h localhost -u ...
- VMware 常见问题及解决办法
Ø 简介 本文介绍使用 VMware 虚拟机时常见的问题及解决办法,主要包括: 1. 虚拟机操作系统装好后,每次进入虚拟机还进入安装程序 2. 虚拟机不能与主机复制粘帖 3. 解决错误: ...
- Java JPS找不到正在执行的java进程 jps cannot see running java process
最近磁盘进展,把临时目录/tmp给全删了,结果发现jps的输出为空,找不到正在运行的jvm进程. 但是新建的进程没有问题,能够正常查看: [root@node-master ~]# ps -e|gre ...
- 解决MySQL Access denied for user 'root'@'IP地址' 问题
1.mysql -u root -p 登陆进MYSQL: 2.执行以下命令: GRANT ALL PRIVILEGES ON *.* TO 'your name'@'%' IDENTIFIED BY ...
- Element-UI标签页el-tabs组件的拖动排序实现
ElementUI的标签页组件支持动态添加删除,如下图: 但是这个组件不支持标签之间的拖动排序.那么我们自己怎样实现这个功能呢? 有一个叫vuedraggable的组件(https://github. ...
- ssh远程访问失败 Centos7
ssh远程访问失败 Centos7 命令ssh远程访问另外一台主机hadoop.master失败 #ssh hadoop.master 报以下信息 [root@hadoop ~]# ssh hadoo ...
- sonar服务搭建
1.下载安装包,我安装的是6.7.6版本 https://www.sonarqube.org/downloads/ 2.安装前的环境要求 JDK1.8+ 数据库,我用的是Mysql5.6版本 3. ...
- 2018-2019-2 20165234 《网络对抗技术》 Exp0 Kali安装 Week1
Week1 kali安装 一.下载系统镜像文件 首先下载系统镜像,进入kali官网,在Downloads中选择Download Kali Linux. 我选择的是64位版本,点击HTTP下载镜像文件. ...
- 20175204 张湲祯 2018-2019-2《Java程序设计》第七周学习总结
20175204 张湲祯 2018-2019-2<Java程序设计>第七周学习总结 教材学习内容总结 -第八章常用实用类要点: 一.String类: 1.String类所在的包:java. ...