vue项目如何让客户端（缓存）自动更新？

Question

前端项目往往会被浏览器缓存，但是有些突发情况，往往希望这些被缓存的html、js不要生效，而是去服务端请求最新的html、js等文件。

场景：公司业务发生变更，希望先尽快关闭掉某个功能，由于后端修改、测试、发布的时候往往需要更长时间，所以先把前端入口屏蔽往往是不错（的应急）的方法，但是由于前端往往被浏览器缓存，所以会导致被屏蔽的功能有些用户不可以使用，而有些用户仍能使用。

那么修改静态的前端文件如何能让那些缓存的客户端失效呢？

前端环境：

vue.js、nginx

Answer 1

找到了一个办法：参考。但是这样的话html文件就没法利用缓存了 。

引用：

vue-cli里的默认配置，css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。
不过值得注意的是，把打包好的index.html放到服务器里去的时候，index.html在服务器端可能是有缓存的，这需要在服务器配置不让缓存index.html
nginx 配置，让index.html不缓存

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

no-cache, no-store可以只设置一个 
no-cache浏览器会缓存，但刷新页面或者重新打开时 会请求服务器，服务器可以响应304，如果文件有改动就会响应200 
no-store浏览器不缓存，刷新页面需要重新下载页面

Answer 2

一般通过 vue-cli 的项目，默认的 webpack 线上配置文件会配置 output：

filename: utils.assetsPath('js/[name].[chunkhash].js'),

打出来的 dist 目录的文件名应该都是带 md5 的，这样每次文件修改，资源的文件名是会变的

Answer 3

Vue SPA 项目，浏览器和 nginx 反向代理缓存问题解决实方案https://juejin.im/post/5c09cb...

Answer 4

可以参考这篇博客
https://blog.csdn.net/weixin_...

Answer 5

你好，我现在打包部署到nginx上也遇到类似的浏览器缓存问题，请问你解决了吗？