vue打包版本更新解决浏览器缓存

2024-09-01

Vue打包文件放在服务器后，浏览器存在缓存问题

每次打包更新版本发到服务器上,导致偶尔会出现不能即使更新最新代码,浏览器存在缓存的问题. 解决方法:找到webpack .prod.conf.js 1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳来区分 output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].'+_Version+'js'), c

js 给url添加时间戳解决浏览器缓存

//解决浏览器缓存 function timestamp(url){ // var getTimestamp=Math.random(); var getTimestamp=new Date().getTime(); if(url.indexOf("?")>-1){ url=url+"&timestamp="+getTimestamp }else{ url=url+"?tim

js进阶解决浏览器缓存不能自动更新的问题（在ajax的url上带上一个参数，可以是日期，或者是随机数）（随机数Math.random）（取得日期的毫秒数：new Date().getTime();）

js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) 一.总结 js中的随机数Math.random js中取得日期的毫秒数:new Date().getTime(); 二.js进阶解决浏览器缓存不能自动更新的问题 ajax1.js function ajax(url,funSucc,fnFaild){ var xhr=new XMLHttpReque

给url添加时间戳，解决浏览器缓存

//解决浏览器缓存function timestamp(url){ // var getTimestamp=Math.random(); var getTimestamp=new Date().getTime(); if(url.indexOf("?")>-1){ url=url+"&timestamp="+getTimestamp }else{ url=url+"?timestamp="+getTimestamp } return

给js加版本号解决浏览器缓存问题

我们知道打开网页时浏览器会加载需要的资源,比如图片.音频.js文件.css文件等.并且会把这些资源作为缓存保存下来,再次打开网页时缓存好的资源就不需要再次加载了.但是,这样有一个问题,就是当程序猿更新了网页内容后,因为浏览器缓存的存在,可能没有办法显示出更新后的内容. 今天我就遇到了这样的问题,做了一个小游戏的网页,用到了大量的图片和音频,测试时更新的js不能立刻反馈,总是需要清除缓存后刷新才能看到更新.但是大量的图片和音频,每次都需要清除缓存也太麻烦了,我就百度了一下有没有好的解决方法. 百度

解决vue项目在ie浏览器缓存问题。

ie浏览器一直是程序员的噩梦.项目在谷歌浏览器上完美运行.在ie浏览器上,缓存问题真心恶心.后台查看了资料说在接口上加上时间戳或随机数就行了.要是这样干,工作量真心大啊.后来我对我们公司大神封装的axios进行修改. 修改前POST请求: export const postRequest = (url, params, method) => { // debugger //base = getCookie("server_context_gi"); // alert(`${bas

学习笔记：Maven构造版本号的方法解决浏览器缓存问题

需要解决的问题在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的缓存逻辑有时出现问题后服务器的最新版本文件无法更新客户端的缓存. 这个问题会给用户产生许多的困扰,当然首先是测试人员会很头痛,一些看起来没有修复的bug为什么开发要说做好了?这种时候我会无奈的说:ctrl+f5刷新一下.但这毕竟不是解决问题的方法. 思路与方法考虑思路之前没有着手处理过这样的问题

前端 vue 等刷新清浏览器缓存的方法

vue开发过程中发现内存一直往上飙,360时不时的提示下清理内存,测试发现每刷新一次页面内存就增加1%. 清掉浏览器的缓存等各种数据以后内存明显变小,刷新页面导致内存爆表. 这种问题着实不应该存在,记得在head中有可以清缓存的方式,加上之后果然不会刷新一次加1%的内存了,甚至可以一定程度上缓解vue的内存占用率大的问题,代码如下: <meta http-equiv="pragma" content="no-cache" /> <meta http

js 给链接 url或href或js、css、图片等解决浏览器缓存

一. 添加时间戳情况一.链接是常量 var rand = new Date().getTime(); var aLen=document.getElementsByTagName("a"); console.log(aLen.length); for (var a=0;a<aLen.length;a++){ var href = aLen[a].getAttribute('href'); document.getElementsByTagName("a")[

gulp 添加版本号解决浏览器缓存问题

分别安装gulp-rev.gulp-rev-collerctor.gulp-asset-rev,安装了的略过 npm install gulp-rev --save-dev npm install gulp-rev-collerctor --save-dev npm install gulp-asset-rev --save-dev gulp-asset-rev是处理css图片路径哈希值的打开node_modules\gulp-assets-rev\index.js 78行 var verSt

Vue打包文件放在服务器，浏览器存在缓存问题的解决

在入口文件index.html添加 <meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="expires" content="0&qu

解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机

分享一个控制JS 浏览器缓存的解决办法。

JS 缓存的问题一直都是我们又爱又恨的东西.也是我们比较头痛的问题, 一方面为了提高网站响应速度,减少服务器的负担,和节省带宽,将需要将静态资源缓存在客户端, 但是另一方面,当js 文件有改动的时候,如何快速的将客户端缓存的js文件都失效,这是非常头痛的问题. 以至于每次客户反馈问题的时候,我们第一个解决办法都是清理浏览器缓存. 那么如何解决呢. 1. 直接禁止全部的静态文件缓存在html 头部加上如下代码: <META HTTP-EQUIV="pragma" CONTENT

解决IE浏览器缓存导致AJAX请求数据异常

IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面<head>标签里,加上以下声明:  <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="n

利用gulp解决微信浏览器缓存问题

做了好多项目,这次终于要解决微信浏览器缓存这个令人头疼的问题了.每次上传新的文件,在微信浏览器中访问时,总要先清除微信的缓存,实在麻烦,在网上搜罗了很多解决办法,终于找到了方法:利用gulp解决缓存问题.关于gulp大家可以去gulp官网去详细了解. 这篇文章主要参考于Gulp解决发布线上文件(CSS和JS)缓存问题和Gulp.js----比Grunt更易用的前端构建工具两篇文章,在这里先谢过原作者. 本文主要记录安装gulp以及使用.解决缓存问题的过程,以便日后方便查阅. 1.安装NodeJS

vue打包静态资源路径不正确的解决办法

vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ 2.css中引用的图片资源找不到我的login.vue文件中有一段css,其中引用了一个背景图片,是这样写的 .login{height:100%;background: url("../assets/login_bg.jpg") no-repeat

vue打包后出现一些map文件的解决方法

Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始打包 2.会在项目目录下自动创建dist目录,打包好的文件都在其中解决办法:去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压

vue服务端渲染浏览器端缓存（keep-alive）

在使用服务器端渲染时,除了服务端的接口缓存.页面缓存.组建缓存等,浏览器端也避免不了要使用缓存,减少页面的重绘. 这时候我们就会想到vue的keep-alive,接下来我们说一下keep-alive的使用假如现在我们有两个页面,home.vue 和 about.vue home.vue <template> <div> home </div> </template> <script> export default { name: Home, c

引用静态资源的url添加版本号，解决版本发布后的浏览器缓存有关问题

在日常的工作中,我们经常会遇到页面文件(html,jsp等)中引用的js,css,图片等被修改后,而浏览器依然缓存着老版本的文件,客户一时半会看不到修改后的效果,同时也给生产环境的版本发布带来了一些问题. 其实遇到这种问题,我们第一反应是清空浏览器缓存,但是我们不是客户啊,也不能要求客户每次去清空缓存.所以遇到这种问题我们的解决方法如下: 通常的解决方法就是在资源后跟上随机的参数或者版本号,日期等,来刷新浏览器的缓存使其到服务器上重新下载这些文件,如淘宝:http://a.tbcdn.cn/p/

[Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存

转载: https://www.jianshu.com/p/cf63a1fabc86 现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置. 1.首先,先了解一下pushState.replaceState. 参数(params) 功能说明 state 存储JSON字符串,可以用在popstate事件中,可以通过location.state获取 title 现在大多数浏览器不支持或者忽略这个参数,最好用null代替 url 任意有效的URL,用于更新

vue打包版本更新解决浏览器缓存

热门专题