nginx中对vue(spa)项目的缓存配置

目前前端的项目基本上被vue、react、angular霸占了,构建打包也基本上都是基于webpack,3个不同框架其实都提供了一套比较完成的开发工具链,最典型的其实就是将构建完成的文件加上hash值,如a.js 在构建完成后会变成a.abad3333ss.js文件,这样在前端项目发布新版部署的时候,能让浏览器不缓存a.js文件。

关于部署,目前前端基本上都是基于nginx进行独立部署的,方便快捷没有跨域问题,使用nginx部署就会有缓存问题,也就是浏览器访问你的域名之后,默认是会把所有静态文件缓存到本地的,针对这种情况,有2中解决方案:

nginx配置文件不缓存

不缓存,也就是在nginx的配置中,强制设置所有文件均不会在浏览器缓存,这样不管项目发版之后有没有对项目的静态文件的文件名设置hash值,(版本号),浏览器始终会去服务器请求最新的文件,坏处就是加载速度会稍慢,尤其是在网络条件不理想的情况下,具体配置如下:

1
2
# 在nginx.conf文件中的location或者server中设置请求cache-control请求头
add_header Cache-Control no-cache,no-store,must-revalidate;

静态文件加hash,nginx配置不缓存html

既然各开发框架构建的前端项目都对静态文件的文件名增加hash值,那么肯定要利用起来,但是直接使用会有问题。

构建出的静态文件-index.html 未改名,其他静态文件名是改了,但是文件引用全部是在这个html文件中的,如果index.html文件也缓存了,那么他引用的对应的文件也不会发生变化!这时候需要针对html单独进行缓存设置:

1
2
3
4
5
6
# 在对应的location中增加以下代码,即html后缀的文件名不会进行缓存
location / {
if ($request_filename ~* ^.*?.(html|htm)$){
add_header Cache-Control no-cache,no-store,must-revalidate;
}
}