Vue SPA 解决浏览器缓存问题

如何让发布到线上的 vue 单页应用能及时更新到浏览器，而无需用户强制刷新页面呢？

因为 js、css、图片等资源文件名带有 hash 值，只要文件名变了就会更新，所以可以设置缓存，但 html 文件名没有加 hash 值，所以不能缓存该文件。

在 nginx.conf 中设置

        location / {
            root html/dist;
            index index.html index.htm;
			if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$) {
				expires    100d;  # js、css、图片缓存100天(因为文件名有hash)
				#add_header Cache-Control "max-age = 8640000"; # 或者设置max-age
			}
		 
			if ($request_filename ~* .*\.(?:htm|html)$) {
				add_header Cache-Control "no-store";  # html不缓存(因为文件名没有加hash)
			}
        }

通过上述配置，让浏览器不缓存 html 文件。

文章参考：http常用缓存策略及vue-cli单页面应用服务器端(nginx)如何设置缓存