最近上线的一个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. javascript 获取字符递增

    比如A->B,AA->AB,Z->AA 参考https://blog.csdn.net/xiaotao2004/article/details/75096607 C#版本,改写为ja ...

  2. 永续公债(or统一公债)的麦考利久期(Macaulay Duration)的计算

  3. Exp1:PC平台逆向破解 20164314 郭浏聿

    一.实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getS ...

  4. Node的express配置使用ejs模板

    注册ejs模板为html页.以.ejs为后缀的模板页,现在的后缀名可以是.html app.engine('.html', require('ejs').__express); 设置视图模板的默认后缀 ...

  5. 彻底解决MacOS上应用程序快捷键冲突的问题,自定义快捷键设置

    1看图操作 上面选择好你要修改的应用程序的快捷键 ,我以Chrome为例子 最后点击下ADD 然后回到Chrome的菜单,发现刷新页的快捷键变成了F5 注意,快捷键的名字要和你Chrome菜单上的名字 ...

  6. Centos6.5使用yum安装mysql——快速上手必备(转载)

    第1步.yum安装mysql[root@stonex ~]#  yum -y install mysql-server安装结果:Installed:    mysql-server.x86_64 0: ...

  7. android 给view添加阴影

    1.方法一: 使用 CardView 布局 <android.support.v7.widget.CardView xmlns:android="http://schemas.andr ...

  8. 2018-2019 网络对抗技术 20165231 Exp4 恶意代码分析

    实验目标 1.是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systrac ...

  9. 题解 P3246 【[HNOI2016]序列】

    很久之前做过这道题,但是跑得贼慢,现在用了可以被卡成 n m 的笛卡尔树做法,发现跑得贼快[雾 noteskey 介绍一种复杂度错误然鹅在随机数据下跑得贼快的算法: 笛卡尔树 方法就是 \(O~ n\ ...

  10. safari下载中文文件名乱码

    原因:响应头设置content-disposition,主要遵循 RFC 5987标准. response.setHeader("content-disposition",&quo ...