基于vue-cli3.x脚手架下打包的spa项目缓存机制方案

a 思路

spa项目的网站域名映射的ip地址下入口文件是index.html，除此之外，js、css、img、font等等静态文件都是从index.html下加载出来的。
在vue-cli3.x脚手架打包下的js、css、img、font等静态文件名都是包含hash，所以每次打包index.html加载出来的文件都不会出现相同名称文件，因此也不会出现缓存问题。因此，我们只需要通过配置nginx，设置协商缓存机制，每次发版本后，让浏览器每次使用的index.html，这样js、css、img、font等静态文件都是最新。
本质上，我只需要设置index.html受nginx配置的缓存机制的影响就好了，js、css、img、font等静态文件可以留给浏览器自身的缓存机制来控制，当不是第一次请求js、css、img、font等静态文件时，这些资源文件可以from disk cache/from memory cache，直接从缓存中取对应的文件，这样大大减少服务器的资源消耗，同时，通过网友文件的加载速度和页面渲染速度。

b 问题

在nginx配置过程，我们尝试取捕捉index.html文件，捕捉到之后设置如下：

location ^~ /aa/ {  
        proxy_set_header  X-Real-IP  $remote_addr;
        #html 文件不缓存（你也可以设置为协商缓存，但是参考其他大厂方案，一般index.html入口文件都不作缓存，一方面是因为index.html很小基本在1KB左右，另外这个文件内容变化频繁）
        if ($request_filename ~* ^.*?.(html|htm)$){
            expires -1s;
            add_header Cache-Control no-cache;
           }
         proxy_pass  http://XXX/aa/;               
      } 

但是这样是捕捉不到index.html的，无法控制index.html的缓存。
原因分析，是因为我们在捕捉过程没有一个文件路径是含有.html后缀名的，因此无法过滤出index.html加以设置

c 解决方式

我们无法通过捕捉含有.html后面的路径，但是我们知道“/aa/”所对应的文件就是index.html，所以我们来捕捉这个“/aa/”路径，且不捕捉该路径下子级文件（这样把子文件夹中的js、css、img、font等静态文件也设置来），配置如下：

location ^~ /aa/ {  
   proxy_set_header  X-Real-IP  $remote_addr;        #html 文件不缓存（你也可以设置为协商缓存，但是参考其他大厂方案，一般index.html入口文件都不作缓存，一方面是因为index.html很小基本在1KB左右，另外这个文件内容变化频繁）
        if ( $request_uri = "/aa/") {
            expires -1s;
            add_header Cache-Control no-cache;
       #add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";           }
         proxy_pass  http://XXX/aa/;           
      } 

如此，我们就能简单的过滤出index.html，并加以设置缓存

另外，对于想要过滤掉某个静态文件不被缓存，可以这样配置
这里是过滤掉文件名为env的js文件

if ($request_filename ~* .(env\.js)$) {
   add_header Cache-Control no-cache;
   add_header Pragma no-cache;
   add_header Expires 0;
}