【Vue】禁用浏览器缓存配置，防止每次发版都需要清缓存

meichaoWen

已于 2023-05-11 16:29:20 修改

阅读量2.6k

点赞数

分类专栏： vue 文章标签：缓存

于 2023-05-11 16:28:14 首次发布

本文链接：https://blog.csdn.net/meichaoWen/article/details/130624594

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目开发测试阶段，时不时发版，更改的内容有时候不清浏览器缓存没办法看到，为测试带来麻烦。禁用浏览器缓存可以解决这个问题。但项目上线后建议去掉禁止缓存的配置。

1、在index.html的<head>标签中添加如下代码

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

这段代码可以通过设置HTTP响应头的方式来控制浏览器缓存，相当于在每次请求时都强制浏览器重新获取资源，而不管之前是否缓存过。可以有效地避免浏览器缓存的影响，但是也会导致资源的重复下载和带宽浪费，因此应该谨慎使用。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

meichaoWen

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

浏览器缓存和vue-cli缓存策略

weixin_39964419的博客

11-25

2527

浏览器缓存过程及vue-cli缓存策略

http常用缓存策略及vue-cli单页面应用、服务器端(nginx)如何设置缓存或者禁用

前端李小白的博客

08-04

1504

问题描述 vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。需要解决的问题 1、程序每次升级后，用户都不会因为缓存问题而执行的仍然是老的程序。 2、若程序没升级，用户对静态资源的请求则能用到缓存。关于http或者是浏览器缓存策略，可以分为这三种：不使用缓存强制使用缓存协商使用缓存不使用缓存有时，我们希望浏览器永远都不要使用缓存，全部到服务器拉取数据，此时即为不使用缓存，我们可以在服务

参与评论您还未登录，请先登录后发表或查看评论

Vue项目发布后浏览器缓存问题解决

算法小生

07-27

2259

每次Jenkins自动化发布Vue项目后，用户需要手动全部清理历史缓存数据才可以使用系统，用户体验非常不好。

关闭Vue计算属性自带的缓存功能方法

08-27

下面小编就为大家分享一篇关闭Vue计算属性自带的缓存功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue项目打包部署后浏览器自动清除缓存问题（解决方法）

热门推荐

开发猫

06-05

1万+

public文件夹中修改 index.html文件meta配置 vue cli 构建配置在vue.config.js新增配置 const Timestamp = new Date().getTime() module.exports = { configureWebpack: { output: { // 输出重构打包编译后的文件名称【模块名称.版本号(可选).时间戳】 filename: `[name].${Timestamp}.js`, .

vue项目中限制浏览器缓存

发渐稀的博客

07-10

2316

的方式来控制浏览器缓存，相当于在每次请求时都强制浏览器重新获取资源，而不管之前是否缓存过。可以有效地避免浏览器缓存的影响，但是也会导致资源的重复下载和带宽浪费，因此应该谨慎使用。新增配置内容，将时间戳作为打包编译后的文件名称的一部分。针对 Vue3 以下版本，在。在 HTML 页面（如。

React、vue、h5端项目避免缓存

从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

01-19

3550

h5、pc端项目避免缓存

Vue 项目处理每次发版后要清理浏览器缓存

weixin_43285861的博客

03-17

3210

一、在index.vue文件添加如下代码（不推荐） <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"> 二、在打包的时候给每个打包文件加上hash 值，一般是在文件后面加上时间戳，通过vue.

Vue 项目每次发版后要清理浏览器缓存问题

dhp1994的博客

10-28

4294

这样可以解决问题，每次打包发布之后，项目不需要强制清理缓存就可以试试更新内容了。但是这时候又有一个新问题产生。就是这样打包完发布之后，因为每次的文件名不一样，项目中偶尔会报错 ChunkLoadError: Loading chunk failed。原因就是浏览器取的是缓存中的文件名称，新打包之后，文件名称改变，导致浏览器找不到文件了 404。需要刷新页面，重新加载文件。在 vue.config.js 中，将 name.timeStamp.js 改成 name.js?

Vue 解决每次发版都要强刷清除浏览器缓存

kangaroo的博客

05-27

1670

原理将打包后的js和css文件，加上打包时的时间戳 1 index.html 在 public 目录下的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"&g

Vue 禁用浏览器的前进后退操作

10-14

在Vue应用程序中，有时我们需要控制浏览器的前进后退（前进/后退按钮）操作，以满足特定的用户体验需求。在本文中，我们将深入探讨如何在Vue中禁用或管理这些功能，以及与`history`对象相关的一些核心概念。首先，...

浏览器缓存问题处理

01-08

- no-cache：数据内容不能被缓存，每次请求都需向服务器验证是否有更新。 - no-store：禁止缓存，连临时文件也不存储。 - max-age：指定资源的缓存时间，单位为秒。 - private：仅允许在浏览器缓存，首次请求时...

你修改了样式，却要我手动清除游览器缓存，这是BUG！

01-08

第一种方式是完全禁用缓存，但这会增加服务器负载，对性能产生负面影响。第二种方式是在静态文件URL后面添加版本号参数，比如 `xxx.js?v=time`，这可以让浏览器认为这是一个新的资源，从而强制重新加载。这种方式...

Vue2.0 实现页面缓存和不缓存的方式

10-16

今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 删除页面缓存_Vue 项目强制清除浏览器的缓存

weixin_39830175的博客

12-20

1066

(1)最基本的方法就是，在打包的时候给每个打包文件加上hash 值，一般是在文件后面加上时间戳//在vue.config.js 文件中，找到output：const Timestamp = new Date().getTime()output: { // 输出重构打包编译后的文件名称【模块名称.版本号.时间戳】filename: `[name].${process.env.VUE_APP...

vue禁止ajax缓存,vue-router 中使用控制 ajax 请求的缓存策略

weixin_36364707的博客

08-06

325

1. 背景vue 中有个 keep-alive 的功能，可以将组件渲染结果缓存起来，结合 vue-router 中使用，可以缓存某个 view 的整个内容(比如列表页)。通常会有这样的需求：用户单击列表页(List)中某个标题，进入到详情页(Detail)。此后会有两种情况返回到 List：用户点击导航栏中的 /list 链接;用户点击浏览器返回按钮 ←情况 1 发生时，我们希望用户进入 List...

vue项目禁用缓存，解决更新后找不到文件报错的问题

03-13

1264

1、每次进入页面前先强制刷新一次，或进行版本管理，有版本变更时强制刷新 2、使用HTML meta no-cache标签来禁用缓存 <meta http-equiv="Expires" content="0"> <meta http-equiv="Cache-Control" content="no-cache,no-store"> <meta http-equiv=...