生产环境,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 ...
随机推荐
- 定时调度系列之Quartz.Net详解
一. 背景 我们在日常开发中,可能你会遇到这样的需求:"每个月的3号给用户发信息,提醒用户XXX "."每天的0点需要统计前一天的考勤记录"."每个月 ...
- Nginx 完全配置
入门教程 初识Nginx 你真的了解如何将 Nginx 配置为Web服务器吗 设置静态网页编码 --> 针对非类Unix系统 针对服务器 http { ... charset UTF-8; .. ...
- LNMP组合环境
Mysql----二进制安装: 下载rpm包 创建MySQL用户: useradd -s /sbin/nologin mysql -M 这里遇到无法创建用户,提示:useradd: group mys ...
- java基于redis事务的秒杀实现
package com.vian.user.service; import org.junit.Test; import org.springframework.util.CollectionUtil ...
- centos7.2 下 部署单节点redis 3.2.5
#tar -xvf redis.3.2.5.tar.gz –C /usr/local/ #cd /usr/local/ #mv redis.3.2.5 redis #cd redis #make &a ...
- further configuration avilable 不见了
Dynameic Web Module的further configuration avilable 不见了 打开目录下的 org.eclipse.wst.common.project.facet. ...
- mysql 1194 – Table ‘tbl_video_info’ is marked as crashed and should be repaired 解决方法
执行REPAIR TABLE `tbl_vedio_info`; 然后就可以了
- JavaScript—var lef const区别
今天刚刚学JavaScript 因为以前学过.学起来也就轻松.今天在练习.流程控制语句的时候,用WebStrom 写的时候 var 声明变量的时候 下面老是有一条白线.开始以为是开发环境有问题 然后, ...
- 第十二节,OpenCV学习(一)图像的读取、显示、保存
一.读取图像 所谓的图像就是一个数组,对图像的处理就是对数字的处理 import cv2 import numpy as np img = cv2.imread('dog.jpg') print(im ...
- “Excel-建议不可用于您所选择的数据”错误提示
Excel作为一项的数据图表绘制软件,在工作中经常用到.“建议不可用于您所选择的数据这一错误提示,我也遇到了几次了,但是每次遇到总是忘了上次是什么原因.这次,写下博客记录.一般都是在复制网页或者其他数 ...