最近上线的一个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. linux下安装kubectl

    查看所有版本: https://github.com/kubernetes/kubernetes/blob/master/CHANGELOG.md 下载指定版本: curl -O https://dl ...

  2. 集智人工智能学习笔记Python#0

    1,学习基本Python语句规范: print('Hello world') print() 为函数 ‘Hello world’为字符串 2,表达式和语句的区别: 表达式有结果,运算就是表达式的一种: ...

  3. echarts笔记

    常见问题: 1.x轴和y轴type同时为category时不可行 只能改变方式显示,返回不同名称,如加上百分比显示 formatter:"value%"; var waterLev ...

  4. Java8 Lambda表达式原理扫盲

    背景 在使用Lamdba表达式,一直以为是内部类的方式实现的,但是一想如果每次调用都实例化一个内部类,性能肯定不好,难道Java里的lambda表达式真的是这么实现的吗?也许是该研究下原理了. 正文 ...

  5. windows安装解压版mysql

    记录下用批处理安装mysql5.7.18的过程与踩到的坑 先在安装目录新建文件my.ini [mysql] default-character-set=utf8 basedir=TODO datadi ...

  6. Nginx下配置虚拟主机的三种方法

    Nginx下,一个server标签就是一个虚拟主机. 1.基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2.基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站,外部网站的 ...

  7. mvc路由报错

    1.添加新项目时,把就项目的dll一起拷贝过来.生成项目,编译通过,打开页面时报错:“找到多个与名为“Home”的控制器匹配的类型 ”,网上的解决方案是,加命名空间,解决,但是自己这边删掉bin中原来 ...

  8. springboot接口访问权限AOP实现

    场景 现在有个系统,很多接口只需要登录就可以访问,但是有些接口需要授予并验证权限.如果用注解controller的方式控制接口的权限呢? 1.注解声明代码 这个注解是要装饰在controller接口上 ...

  9. pycharm安装package时报错

    在pycharm pip 包时,提示报错:module 'pip' has no attribute 'main' 原因:由于我的是pip 18.1 版本里没有main() 解决方法: 如不降级 pi ...

  10. django学习笔记-模板层

    模板层 将Python嵌入到HTML中. 模板简介 将HTML硬解码到视图并不是那么完美原因如下: 对页面设计时也需要对python代码进行相应的修改,模板可以不就行python代码修改的情况下变更设 ...