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

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

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

nginx配置文件不缓存

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

# 在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单独进行缓存设置：

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