前端发版后浏览器缓存问题客户反应页面经常点击没有反应，刷新几次后又可以正常访问。结果多次测试发现确实存在这个问题，打开控

前言

客户反应页面经常点击没有反应，刷新几次后又可以正常访问。结果多次测试发现确实存在这个问题，打开控制台可以看到有些js和css文件获取不到。

问题原因

由于浏览器缓存问题，导致了html页面被缓存，导致访问的js和css还是以前的路径。而vue打包后文件名称会生成新的hash后缀，所以访问以前的js和css路径的资源，如果浏览器有部分以前的js或css缓存失效就会去服务器获取旧的资源，这是旧的资源已经不存在了，所以就出现了问题。

解决办法

1、增加htmlmeta标签

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

2、nginx配置不缓存html页面,增加Cache-Control响应头

add_header Cache-Control "no-cache, no-store"

    location   / {
           root   /home/web/dist;
           index  index.html;
           try_files $uri $uri/ /index.html;
           expires 30d;
    }

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