Vue前端缓存问题

简介

vue-cli脚手架搭建的前端工程，当程序版本升级时，用户因为缓存问题访问的还是老的页面

方法一

在index.html文件中添加代码

<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />

备注：

• 该方法可以解决缓存问题，但解决方法比较暴力。
• 所有的静态资源都无法缓存了，每次访问都会重新请求
• 不推荐

方法二

vue-cli每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加上了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。

只需要让index.html不缓存，且让其他静态资源缓存，就能实现要求了

这里通过配置服务器，来实现单独设置请求index.html时的header，以达到控制缓存的目的

这里以nginx为例

• 给nginx的虚拟主机配置，添加一下设置

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