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-cli3.0实现一个多页面应用的历奇经历记录总结
这篇文章主要介绍了vue-cli3.0实现一个多页面应用的历奇经历,总结分析了vue-cli3.0实现一个多页面应用遇到的问题与相关操作注意事项,需要的朋友可以参考下
2020-03-03
Vue+UpLoad实现上传预览和删除图片的实践
本文主要介绍了Vue+UpLoad实现上传预览和删除图片的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
vue 自动生成swagger接口请求文件的方法
这篇文章主要介绍了vue 自动生成swagger接口请求文件的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
vue实现短信验证码登录功能（流程详解）
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下
2019-12-12
vue el-table实现多选框回填的示例代码
摘要：Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
深入理解Vue 单向数据流的原理
这篇文章主要介绍了深入理解Vue 单向数据流的原理，详细的介绍了Vue 单向数据流的原理和使用，具有一定的参考价值，有兴趣的可以了解一下
2017-11-11
Vue中key的具体使用
在vue中,key是dom对象的标识,本文主要介绍了Vue中key的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-06-06
vue动态菜单、动态路由加载以及刷新踩坑实战
这篇文章主要给大家介绍了关于vue动态菜单、动态路由加载以及刷新踩坑的相关资料,踩的这些坑其实是挺常见的,大家可以看看,避免遇到的时候再踩到同样的坑,需要的朋友可以参考下
2021-10-10
解决node-sass安装报错无python等情况
在国内安装node-sass常因无法稳定连接GitHub而失败,解决方法包括手动下载对应的binding.node文件并放入缓存目录,操作步骤详细,适合非Python用户,无需额外环境配置
2024-10-10
Vue实现自定义右击删除菜单的示例
本文主要介绍了Vue实现自定义右击删除菜单的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02