缓存导致的Vue首页白屏及解决方法

缓存导致的Vue首页白屏及解决方法

Vue页面首页白屏原因很多，有浏览器兼容问题，有缓存问题，也有代码问题。这里只说缓存问题。

原因

默认情况下，浏览器会缓存js、css，html等资源。

服务器有cache-control设置时，浏览器首先以这个设置为准，能用缓存就使用缓存，这时不会发送http请求。

服务器没有cache-control设置，一般HTML文件没有缓存设置。浏览器会发送HTTP请求，会带上缓存的etag和最后修改时间，以确认缓存的是最新的文件，服务器返回304或200

当用户按CTRL加F5强制刷新或首次打开，这就是正常的HTTP请求，也没有缓存可以使用。

特殊情况

chrome或edge中，用户设置了”继续浏览上次打开的网页“，这时浏览器会直接使用关闭时的页面，但页面中的资源（js、css、image）会再次请求。

如果页面关闭期间服务器更新了HTML并删除了旧的资源文件，页面就会白屏。

解决

没有好的方法，一种是保留旧的资源不删除，这样会导致资源混乱。

可以通过nginx禁止缓存index.html

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