单页应用部署时缓存策略

问题描述

前端网站采用Vue + Nginx的方式进行生产环境部署。

系统在发布更新次日，收到客户的投诉，发现登录系统之后，出现页面空白问题，刷新几次后显示正常。查看日志发现：

问题分析

由于vue在build之后，会重新生成index.html + static资源。从日志判断，【/static/js/0.4a66cb25e7f24262c3f6.js】是上一版本的静态资源。而index.html中get请求获取，跟浏览器缓存有关。

但是查看nginx配置，发现没有配置缓存策略。

    server {
        listen       80 default_server;
        server_name  localhost;
        root         /www/;
        index        index.html index.htm;
        location / {
             try_files $uri $uri/  index.html;
        }
    }

当http头中无缓存配置，那么将使用浏览器默认缓存策略，如下：

解决方案

http请求头中，通过cache-control声明缓存策略。

• 对于index.html采用no-cache策略，客户端使用缓存，但是使用前需要与服务器确认版本状态。
• 对于static资源，采用客户端缓存。

nginx配置参考：

  location /index.html {
    add_header "Cache-Control" "no-cache";
  }

  location /static/ {
    access_log none;
    expires 14d;
  }

  location / {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8081;
    client_max_body_size  500m;
  }

  location = / {
  }

参考资料

1. https://blog.csdn.net/youbl/article/details/84879670
2. https://www.cnblogs.com/feng9exe/p/8083237.html