index.html缓存导致加载文件不是最新的解决方法

环境：
前端单页面（Vue） + Nginx

问题：
http://xxx.com/a/ 访问会跳转到 http://xxx.com/a/Index 下，代码有更新访问 http://xxx.com/a/Index 完整链接index.html加载是最新的，访问 http://xxx.com/a/ 还是读取的disk cache的内容，导致加载的页面不是最新的。使得用户不清理缓存展示的内容是错误的。

解决方法：
nginx下配置no-cache、no-store

示例：

location /a {
    add_header Cache-Control 'no-cache, no-store, must-revalidate,proxy-revalidate, max-age=0';
}

no-cache：可以在本地缓存，可以在代理服务器缓存，但是这个缓存要服务器验证才可以使用。index.html没有改变，浏览器状态码是304。

no-store： 本地和代理服务器都不缓存，每次都从服务器获取。index.html状态码始终是200。

must-revalidate： 缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。表示如果页面过期，则去服务器进行获取。

proxy-revalidate： 与must-revalidate作用相同，但它仅适用于共享缓存（例如代理），并被私有缓存忽略。

max-age=： 设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间。max-age会覆盖掉Expires。

在chrome network查看请求资源的时候，发现浏览器缓存有3中情况。

• memory cache
  不访问服务器，直接读缓存。从内存中读取，一般缓存资源不大的图片等，浏览器关闭数据不再。
• disk cache
  不访问服务器，直接读缓存，从磁盘中读取缓存，当kill进程时，数据还是存在。一般缓存资源较大的js、css等。
• 304
  访问服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据。

参考：
https://www.zhihu.com/question/64201378
https://blog.csdn.net/zs343961443/article/details/87258217