浏览器静态资源缓存问题

一、场景：页面功能不可用，打开控制台发现js静态资源找不到

二、分析：可能是由于Nginx上发布了新版本，而浏览器存在缓存，此次操作仍然请求的是原来的静态资源。

ps：什么情况用缓存，什么情况会更新？
js文件比如叫做http://xxx.aaa.com/hello.js，如果更改了hello.js又想让浏览器不要使用缓存而是加载你新的文件，那么就加一个参数，文件地址变成http://xxx.aaa.com/.js?v=111，这样浏览器就理解为2个不同的文件了，就不会直接调用缓存的js文件，而是加载新更改的文件了。
而该项目前端基于vue-cli，vue-cli默认配置css和js的名字都加了哈希值，所以服务器上新版本的css、js就和旧版本的名字是不同的，浏览器会加载新更改的文件。
不过，打包后的index.html放到服务器里去的时候，由于没有哈希值或其他标识，浏览器判断该文件没有变化，使用的是缓存的index.html，而css和js却加载了更新后的，导致控制台里报错(找不到js文件)

三、解决办法：需要在服务器配置不让缓存index.html

以nginx为例：

location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}   
# Expire rules for static content

# cache.appcache, your document html and data
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
  expires -1;
  # access_log logs/static.log; # I don't usually include a static log
}

# Feed
location ~* \.(?:rss|atom)$ {
  expires 1h;
  add_header Cache-Control "public";
}

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  expires 1M;
  access_log off;
  add_header Cache-Control "public";
}
#ps: nginx也可以通过 expires 指令来设置浏览器的Header, 使用本指令可以控制HTTP应答中的“Expires”和“Cache-Control”的头标（起到控制页面缓存的作用）。
例如  js css缓存一年：
# CSS and Javascript
location ~* \.(?:css|js)$ {
  expires 1y;
  access_log off;
  add_header Cache-Control "public";
}