最近上线的一个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的问题的更多相关文章

  1. Vue页面跳转动画效果实现

    Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d

  2. web页面找不到资源文件,报404,但是资源文件存在且路径没错

    如题 , 今天遇到这个问题,maven项目导入本地myeclipse,正常跑起来之后,在web端存在部分页面资源加载不进来. 但是项目资源确实存在,一开始以为是myeclipse开发环境搭建错误导致, ...

  3. vue页面跳转以及传参和取参

    vue中this.$router.push()路由传值和获取的两种常见方法 1.路由传值   this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法 ...

  4. VUE页面跳转方式

    一.to +跳转路径 <router-link to="/">跳转到主页</router-link> <router-link :to="{ ...

  5. Web设计中打开新页面或页面跳转的方法 js跳转页面

    Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...

  6. 微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json

    微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app ...

  7. Vue页面跳转$router.push 的用法

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon&qu ...

  8. vue - 页面跳转

    HTML:a 小程序:navigator Vue:router-link 1. router-link => a标签 2. javascript标签跳转页面 2.1   2.2 3. 常用方法之 ...

  9. vue 页面跳转传参

    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...

随机推荐

  1. springBoot+ vue+ Element-ui实现合并多图上传(一次请求多张图片)

    这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的. 1:  实现多图上传主要用到以下两个属性: 下面讲一下属性使用: <el-upload :actio ...

  2. <HTML>页面与互联网

    托管 1.数据传输:托管公司允许你在一定时间内向访问者发送的页面和数据量. 2.备份:公司是否对你的页面定期备份,从而在服务器出现硬件故障时能够恢复. 域名 www.starbuzzcoffee.co ...

  3. FPGA

    FPGA(Field-Programmable Gate Array),即现场可编程门阵列,它是在PAL.GAL.CPLD等可编程器件的基础上进一步发展的产物.它是作为专用集成电路(ASIC)领域中的 ...

  4. C#使用Selenium+PhantomJS抓取数据

    本文主要介绍了C#使用Selenium+PhantomJS抓取数据的方法步骤,具有很好的参考价值,下面跟着小编一起来看下吧 手头项目需要抓取一个用js渲染出来的网站中的数据.使用常用的httpclie ...

  5. idea工具的快捷方式

    用idea默认的快捷键 Ctrl+~,快速切换方案(界面外观.代码风格.快捷键映射等菜单) Shift+Enter,向下插入新行 Ctrl+F,查找文本 Ctrl+R,替换文本 Ctrl+I,实现方法 ...

  6. iTOP-4412/4418/6818开发板-fastboot烧写脚本

    在 iTOP-4412,4418,6818 开发板烧写的时候,使用的是 fastboot 工具. fastboot 工具需要在 cmd.exe 中调用,每次都需要输入烧写命令,这样步骤有点多.在程序员 ...

  7. Python3的保留字

    Python3的保留字 false none true and 表示条件的并列,并且条件全部成立 as assert break class continue def del elif else ex ...

  8. input子系统学习笔记六 按键驱动实例分析下【转】

    转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...

  9. nginx允许IP访问不生效问题【原创】

    使用nginx的nginx_upstream_check模块来检测后端服务器的转态时,设置只允许某段IP访问,发现不生效,不在此网段的IP也可以访问. 原因为在允许IP访问最后一定要加deny all ...

  10. Gitlab_ansible_jenkins三剑客③Ansible的安装及使用

    一台服务器可能会安装不同的python应用,不同的应用可能使用的模块版本不同,如果都安装在同样的环境下容易冲突,为了避免冲突,引入virtualenv 这个包管理工具进行环境的隔离 使用pip安装之前 ...