vue项目部署自动清除缓存方式

更新时间：2023年07月25日 11:19:26 作者：天边月_

这篇文章主要介绍了vue项目部署自动清除缓存方式,包括清除文件缓存，清除浏览器 localStorage 缓存方式，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下

清除文件缓存

1.index.html 文件添加 http-equiv(http 响应头)

通过在head标签中添加meta，当浏览器访问index.html时，会向服务器重新请求静态资源。该方法了解即可，不推荐使用，会导致用户每次访问程序都需要重新请求服务器，所有静态资源都无法使用缓存，浪费流量，网络压力大。

// 设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。
<meta http-equiv="Expires" content="0">
// 设定禁止浏览器从本地机的缓存中调阅页面内容
<meta http-equiv="Pragma" content="no-cache">
// 清除缓存，再次访问这个网址要重新下载
<meta http-equiv="Cache-control" content="no-cache">

2.给打包的js、css文件添加时间戳

项目打包时给js、css文件加上时间戳，保证输出的文件名不会相同，通过 vue.config.js 进行配置。

// 获取当前时间戳
const timeStamp = new Date().getTime()
// 时间戳配置
module.exports = {
  // 打包后的文件输出路径
  outputDir: 'dist',
  configureWebpack: {
    // 输出重构 打包编译后的js文件名称，添加时间戳
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/[name].${timeStamp}.js`,
    }
  },
  css: {
    // 输出重构 打包编译后的css文件名称，添加时间戳
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/[name].${timeStamp}.css`,
    }
  }
}

了解：filename：指列在 entry（入口）中，打包后输出的文件的名称chunkFilename：指未列在 entry 中，却又需要被打包出来的文件的名称（懒加载的文件）

清除浏览器 localStorage 缓存

1、更新package.json中的 version 值，每次打包往上递增2、main.js中，根据 version 判断是否进行缓存清理

const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem('appVersion')
if(VUE_APP_VERSION != vers){
  localStorage.clear()
  window.localStorage.setItem('appVersion', VUE_APP_VERSION)
  location.reload()
}

到此这篇关于vue项目部署，自动清除缓存配置的文章就介绍到这了,更多相关vue自动清除缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue项目实例中用query传参如何实现跳转效果
这篇文章主要介绍了vue项目实例中用query传参如何实现跳转效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue父子组件传值以及单向数据流问题详解
大家应该都知道父组件可以向子组件通过属性形式传递参数,传递的参数也可以随时随意修改;但子组件不能修改父组件传递过来的参数,所以下面这篇文章主要给大家介绍了关于vue父子组件传值以及单向数据流问题的相关资料,需要的朋友可以参考下
2021-09-09
vue.js实现点击图标放大离开时缩小的代码
这篇文章主要介绍了vue.js实现点击图标放大离开时缩小，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
vue中实现methods一个方法调用另外一个方法
下面小编就为大家分享一篇vue中实现methods一个方法调用另外一个方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue实现将页面区域导出为pdf
文章介绍了两种将前端页面指定区域导出为PDF的纯前端实现方法,方式一使用jsPDF和html2canvas将特定区域转化为图片,再将图片转化为PDF,适用于小区域转换,但存在翻页时内容拆分的问题,方式二使用html2pdf.js,支持自动分页,适用于较大区域的转换
2025-10-10
Vue.js使用Vapor Mode的方法小结
Vapor Mode是Vue 3.6推出的一个新的高效渲染模式,它实现了无虚拟DOM并大幅度提升性能, 下面就来详细的介绍一下使用Vapor Mode的方法小结,感兴趣的可以了解一下
2026-05-05
vue 实现微信浮标效果
微信的浮窗，大伙应该都用过，当我们正在阅读一篇公众号文章时，突然需要处理微信消息，点击浮窗，在微信上会有个浮标，点击浮标可以再次回到文章。今天小编抽空给大家介绍vue 实现微信浮标效果，感兴趣的朋友一起看看吧
2019-09-09
Vue 3 中使用 OpenLayers 实时显示 zoom
本文介绍了如何在 Vue 3 中使用 OpenLayers 来获取地图的 zoom 值以及四角坐标信息,并实时更新数据,这种方式可以用于 GIS 应用开发,帮助用户更好地了解当前地图范围,感兴趣的朋友一起看看吧
2025-04-04
Vue手动埋点设计的方法实例
这篇文章主要给大家介绍了关于Vue手动埋点设计的相关资料,内容简明扼要并且容易理解,绝对能使你眼前一亮,需要的朋友可以参考下
2022-03-03
vue+rem自定义轮播图效果
这篇文章主要为大家详细介绍了vue+rem自定义轮播图效果，手指触摸左滑和右滑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06