前端开发过程中，会遇到版本发布后，页面还是旧的页面。通过强制刷新的方式，才显示最新的页面。
我们一般为了解决页面缓存问题，打包工具，会在文件名中，添加[hash]值，这样可以保证，文件更新的时候，加载最新的文件。
.
├── css
│ └── app.1fa95977.css
├── favicon.ico
├── index.html
└── js
├── about.3eada96a.js
├── about.3eada96a.js.map
├── app.ccb23d06.js
├── app.ccb23d06.js.map
├── chunk-vendors.21bc0fbe.js
└── chunk-vendors.21bc0fbe.js.map
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<title>vuedemo</title>
<script defer="defer" src="/js/chunk-vendors.21bc0fbe.js"></script>
<script defer="defer" src="/js/app.24662b8a.js"></script>
<link href="/css/app.f975c4dd.css" rel="stylesheet">
</head>
<body><noscript><strong>We're sorry but vuedemo doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
<div id="app"></div>
</body>
</html>
从html文件的src中，可以看出载入的js的文件，是最新的文件。但是为什么没有更新呢？
从加载的html文件中可以看出，现在页面加载的js文件路径，和打包的文件路径不一致？这导致了页面未加载最新的js文件
由于浏览器的缓存策略，导致index.html的文件，由于浏览器缓存策略，导致index.html文件被缓存了。所以，只要解决index.html缓存问题就可以了。
下面列出了几种优化缓存的方式：
方式一:禁用缓存
可以通过ngnix禁用缓存，html文件结尾的都不进行缓存
server {
listen 80;
server_name test.exmaple.cn;
location / {
## 配置页面不缓存html和htm结尾的文件
if ($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
...
}
}
方式二：使用版本控制
可以在文件名中添加一个版本号或者时间戳，例如index.html?v=1.0.1。这样每次更改文件时，文件名都会改变，因此浏览器将不会使用缓存的版本。但是，这样有一个问题，用户在访问的时候不会自己加这个。可能，你会说，每次页面加载后，页面自己重新加载一次，并加上时间戳。这样每次都会重新加载，不太合适。
如果，后端能提供一个接口，也是可以的。
