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自动清除缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3.0 的 Composition API 的使用示例
这篇文章主要介绍了vue3.0 的 Composition API 的使用示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
2020-10-10
vue-router二级导航切换路由及高亮显示的实现方法
这篇文章主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
vue项目通过a标签下载图片至zip包的示例代码
在vue项目中,将图片下载可使用流的形式,下载成单个图片,或者将多个图片下载至zip包,本文就是介绍使用a标签下载图片的用法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-10-10
Vite+Electron快速构建VUE3桌面应用的实现
本文主要介绍了Vite+Electron快速构建VUE3桌面应用的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
vue el-upload上传文件的示例代码
这篇文章主要介绍了vue el-upload上传文件的示例代码，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
解决vue build打包之后首页白屏的问题
下面小编就为大家分享一篇解决vue build打包之后首页白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue3使用canvas的详细指南
这篇文章主要给大家介绍了关于vue3使用canvas的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
2023-04-04
一文详解WebStorm如何调试Vue项目
这篇文章主要介绍了如何使用WebStorm进行断点调试,包括配置、启动本地应用程序、设置断点以及使用调试工具等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
2025-02-02
vue封装一个图案手势锁组件
手势锁是常见的一种手机解锁方式，本文主要介绍了vue封装一个图案手势锁组件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
在Vue3中生成动态的word文档的示例代码
这篇文章主要介绍了如何在 Vue 3 中生成动态的 Word 文档,在开发过程中遇到一个需求,动态生成一个word报表,当时考虑了是前端做还是后端做的问题,最后发现两个解决需求的方法都大差不差,但考虑到前端少发一个请求,就此使用的前端来解决,需要的朋友可以参考下
2024-09-09