# Vue项目 如何解决浏览器缓存问题
> 在代码更新发布后，都会要求运营人员在访问网址时清除下本地缓存，防止万一掉坑
问题就来了：每次清缓存很麻烦，怎样就不需要他们每次去手动清缓存呢？这就涉及到了浏览器缓存的问题
## 1. 什么是浏览器缓存
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从`本地磁盘`显示文档，这样就可以加速页面的阅览。
## 2.浏览器缓存类型
* 缓存协商：Last-modified ，Etag
* 彻底缓存（强制缓存）：cache-control，Expires
## 3.浏览器缓存的优势与劣势
**优势：**
* 节约网络资源，提高网络效率
* 降低服务器压力，减少服务器负担
**缺点：**
* 缓存没有清理机制
* 占用硬盘空间
* 页面缓存，导致页面样式、图片或脚本等未能及时更新展示
## 4. 浏览器缓存机制
* [浅谈浏览器http的缓存机制](https://www.cnblogs.com/vajoy/p/5341664.html)
* [18.彻底理解浏览器静态资源缓存机制](https://blog.csdn.net/u014590757/article/details/80140654)
* [强制缓存和协商缓存有什么区别](https://www.jianshu.com/p/1a1536ab01f1)
* [Nginx下关于缓存控制字段cache-control的配置说明 - 运维小结](https://www.cnblogs.com/kevingrace/p/10459429.html)
## 5.如何清除浏览器缓存
#### 1. 修改根目录index.htm 让所有的css/js资源重新加载
```html
// index.html
<head>
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
</head>
```
#### 2. 配置 nginx 不缓存 html
vue默认配置，打包后css和js的名字后面都加了哈希值，不会有缓存问题。但是index.html在服务器端可能是有缓存的，需要在服务器配置不让缓存index.html
**no-cache**: 数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age, 则缓存期间不访问服务器
**no-store**: 不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)
```
server {
listen 80;
server_name yourdomain.com;
location / {
try_files $uri $uri/ /index.html;
root /yourdir/;
index index.html index.htm;
if ($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "no-cache, no-store"; //对html文件设置永远不缓存
}
}
}
```
#### 3. 打包的文件路径添加时间戳
使用vue脚手架搭建的项目，打开vue.config.js
```
//vue.config.js
const version = new Date().getTime();
module.exports = {
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: {
// 修改打包后css文件名 // css打包文件，添加时间戳
filename: `css/[name].${version}.css`,
chunkFilename: `css/[name].${version}.css`
}
},
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
}
}
}
```
————————————————
版权声明：本文为CSDN博主「woowen！」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/q1ngqingsky/article/details/119671083
Vue项目 如何解决浏览器缓存问题
Copyright: 采用 知识共享署名4.0 国际许可协议进行许可
Links: https://demongao.com/2022/12/vue-xiang-mu-ru-he-jie-jue-liu-lan-qi-huan-cun-wen-ti
