vue项目发布缓存处理 -11-5

vue发布项目时经常会遇到服务器更新代码后，用户访问还是访问的老页面的问题，页面存在缓存，但是vue-cli默认打包的时候css和js都加了哈希值，所以每次修改后生成的文件名是不同的。那是为什么呢？

排查后才发现是因为入口index.html是没有版本号的，而服务器默认会对html页面进行缓存。

所以为了每次发布代码后，用户都能访问到最新代码，需要在服务器进行如下配置：

// vue-cli里的默认配置，css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

// 但是把打包好的index.html放到服务器里去的时候，index.html在服务器端可能是有缓存的，这需要在服务器配置不让缓存index.html

// nginx 配置如下：

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

1. 对hash过的静态文件还是采用默认方式，客户端会缓存。
2. 对html文件，返回时增加头：Cache-Control，必须每次来服务端校验，根据etag返回200或者304
   对应的nginx配置如下：

upstream example-be {
　　ip_hash;
　　server unix:/run/example-be.sock;
}
server{
　　listen 80; #监听端口
　　server_name example.com

　　# 后台api
　　location ~ ^/api {
　　　　proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
　　　　include uwsgi_params;
　　　　 uwsgi_pass example-be;
　　 }

　　# 前端静态文件
   # 由于浏览器缓存静态文件的时间不可控，我们可以在nginx上自己配置expires 1M（1个月）
　　location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
　　　　root /var/www/example-fe/dist/;
        expires 1M;
        add_header Cache-Control "public";
　　}

　　# 前端html文件
　　location / {
　　　　# disable cache html
　　　　add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';

　　　　root /var/www/example-fe/dist/;
　　　　index index.html index.htm;
　　　　try_files $uri /index.html;
　　}
}