vue前端缓存问题解决方案

问题描述

大家用vue脚手架搭建前端工程时，常被缓存问题所困扰，具体的表现就是，当程序版本升级时，用户因为缓存访问的还是老的页面，然后很多同学很暴力的直接在index.html中加入了这几行代码：

升级时缓存问题倒解决了，但直接导致了用户每次访问你的程序时都要重新请求服务器，所有的静态资源都无法用缓存了，浪费流量，网络压力变大。

需求澄清

我们真正需要解决的问题，不是单纯的要缓存或者不要缓存，而是期望视情况而定：

1、程序每次升级后，用户都不会因为缓存问题而执行的仍然是老的程序。

2、若程序没升级，用户对静态资源的请求则能用到缓存。

解决原理

由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。那么只需让index.html不缓存，且让其他静态资源缓存，就能实现要求。

vue-cli打包后生成的js文件

让静态资源有缓存好办，问题在于怎么只让index.html不缓存。这里我们已经不能单单靠前端代码来实现了，需要用到服务器配置。通过服务器配置，来单独设置请求index.html时的header，以达到控制缓存的目的。

具体实现

如果你用Ngnix：

Ngnix还是比较容易实现的，只需增加以下配置：

location = /index.html {
 add_header Cache-Control "no-cache, no-store";
}

如果你用Tomcat：

tomcat稍微麻烦点，需要开发并配置一个过滤器（Filter），如果你只懂前端，那可能需要找后端的兄弟帮忙了。

1、首先我们要用java写个过滤器：

注意：路径要和第三步的配置保持一致

2、然后我们把这个过滤器打成jar包，名字随便，放在tomcat/lib目录下即可。

3、最后，我们需要修改配置文件tomcat/conf/web.xml，在末尾的上方增加以下代码：

MyFilter是你给过滤器起的名字，可随便改

也没有太麻烦，应该大部分同学都能搞定。