如何解决前端页面缓存问题

众所周知，前端浏览器与服务器之前存在着“强制缓存”和“协商缓存”（对此不了解的可以查看其他博主的博文），如果不加以处理的话，每次部署后，js、css、图片甚至是html都会有缓存问题，部署后，发现已经更改的js、css、图片并没有更新，可能会随着服务器设置的协商缓存，经过半小时或几个小时会清掉缓存，遇到这些情况，可能会让一个前端略微有些尴尬。
还好现在的前端开发都是通过webpack等构建工具，通过设置，可以对js、css等文件进行hash版本管理，但是构建工具并没有处理html文件，特别是微信环境对前端html的缓存异常严重。
说说我遇到的问题，我们是通过vue-cli4 构建的多页面应用，外层的服务采用的是前端打包后的静态文件+nginx的形式，我们的页面访问的地址类似成这样，
https://xxx.xxx.com/my-app/index.html#/home?a=123
一个页面到另外一个页面后面的参数会是不同的，我原本认为会避免掉html缓存。但是一次发布的时候，发现浏览器并没有访问新页面，打开f12的开发者模式，一看index.html文件竟然是304缓存文件，我才反应过来，#后面的参数是会被忽略的。为了让业务和测试伙伴尽快投入测试，我提供给他们一个临时解决地址 https://xxx.xxx.com/my-app/index.html?v=1#/home?a=123，在html上加上了v=1 算是请求一个新的html，临时解决了一下。
为了根本解决，还是从我们的nginx服务上解决，解决方案如下：

location / {
                if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件
                {
                   add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
                }
                root /web/;
                index index.html;
                try_files $uri $uri/ /index.html =404;
        }

再查看我们的页面，html返回的都是200，不再有缓存，完美解决。