前端页面缓存的问题

对于一个html页面，缓存分3部分，一个是页面内容，一个是css样式，一个是js文件

1、页面内容（html页面头部或http协议设置禁止缓存）
<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">

说明：HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时，浏览器重新访问服务器已获取页面。如下是使用Cache-Control的基本方法：

1) no-cache:强制缓存从服务器上获取新的页面

2) no-store: 在任何环境下缓存不保存任何页面

HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache，同样可以包含在头信息中。

2、CSS和JS文件（静态资源——引入路径加随机数）
<link rel="stylesheet" href="../css/register.css"/>
<script src="../scripts/register.js"></script>
改成
<link rel="stylesheet" href="../css/register.css?v=20161020"/>
<script src="../scripts/register.js?v=20161020"></script>

就是只要在每次修改后改一下版本号即可

这样每次修改后都要改，有没有自动加版本号的东西，估计有，如果是JSP和php可以通过脚本
自动生成，如果是纯html也可以通过document.write，或者用动态加载JS的框架啥的。

3、CSS和JS文件（动态加时间戳）

<script type="text/javascript">document.write('<script src="index.js?t='+new Date().getTime()+'" type="text/javascript" charset="utf-8"><\/script>');</script>
4.vue中的清除缓存

a、在vue项目中解决

 在入口文件index.html添加：

<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">

、如果是部署在nginx上

在nginx的配置文件 nginx.config添加：

location = /index.html {

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

}

如果是用nginx做反向代理的，这么加

location = /xx（xx为你的代理的项目名） {

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

}

如果nginx上有 proxy_cache 的配置，也考虑删掉，这是nginx的服务器缓存