vue项目如何让网页端（浏览器不缓存）自动更新？

Question

vue-li3项目打包之后部署到服务器的nginx上，怎么让浏览器不缓存信息，每次更新，用户都能看到最新的界面，而不是缓存的？

Answer 1

模板开头加：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

nginx 配置加：

add_header Cache-Control no-store;

这就可以禁用 HTTP 缓存了，但要注意这得客户端的浏览器遵守 HTTP 规范才行，遇上不鸟规范的（对，就说你呢，微信X5内核），没辙。

Answer 2

楼上已经正解，nginx不使用缓存，页面也加入标签禁用缓存

Answer 3

或者你可以打包的时候生成一个version.js，然后在router.js routerBeforeach使用jsonp请求这个文件，进行判断，版本号不一致就刷新页面

Answer 4

是为了调试用么？ 线上一般很少有人不希望走缓存吧？ 调试阶段可以尝试打开 F12 里面 network 的 disabled cached 。 就不会走缓存了

Answer 5

打包时候给静态文件增加随机参数比如 http://aaa.com/static/app.js?...
此参数每次打包或更新时候修改，就可以让浏览器判断为两个文件，不缓存

Answer 6

兄弟 ， 你这个缓存问题 现在处理好了吗？