前端项目上线后，页面因浏览器缓存未刷新问题

当前端页面开发测试完成后进行上线时，有时候在将更新的页面上传到服务器之后，浏览器并没有立即展示新的页面，而继续渲染旧的页面。这是因为浏览器默认会对已访问过的页面进行缓存，以提高性能。因此，当页面内容发生变动时，浏览器会仍然使用缓存中的旧页面，而无法获取到最新的页面内容。

虽然刷新或者清除缓存能解决这方面的问题，但是用户并不知道什么时候需要清除缓存，或者根本不知道如何操作。

所以，需要解决文件变动后浏览器没有更新的问题。

解决方案

一般情况下css、js 和 img 的名字都加了哈希值，所以新版本和就版本的名字是不同的，不会有缓存问题。

但是把打包好的index.html放到服务器后，index.html在服务器端可能是有缓存的。

所以只要 入口文件不缓存 这样就解决问题了。在入口文件head中添加以下代码即可：

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

• Expires：在HTTP响应头中设置Expires字段，用于指定页面的过期时间。当浏览器在过期时间之前再次请求同一资源时，如果服务器返回的响应中包含"Expires"字段且未过期，浏览器将直接使用缓存的资源，而不再向服务器发送请求。Expires是HTTP 1.0版本引入的机制，但它存在一些问题，比如无法处理时钟不同步、不灵活的过期时间等。

• Pragma：在HTTP请求头中使用Pragma字段，通常值为"no-cache"。当浏览器发送请求时，如果请求头中带有Pragma字段且值为"no-cache"，服务器将不使用缓存，并强制要求服务器每次都返回新的响应。然而，Pragma的使用已经过时，Cache-Control是现代浏览器更推荐的缓存控制方式。

• Cache-Control：在HTTP响应头中使用Cache-Control字段来控制缓存行为。Cache-Control是HTTP 1.1版本引入的缓存机制，提供了更为灵活和强大的缓存控制选项。通过设置Cache-Control的值，可以指定缓存的策略，如"no-cache"（不使用缓存）、“public”（可以被任何人缓存）、“private”（只能被浏览器缓存）、“max-age”（缓存的最长时间）等等。

• Cache：Cache（缓存）是指浏览器在第一次请求某个资源后，将该资源保存在本地存储中的一部分。这样，在再次请求同一个资源时，浏览器可以直接从本地缓存中获取资源，而无需重新下载。通常，浏览器缓存可以提升网页加载速度，减轻服务器负担。

综上所述，Expires指定资源的过期时间，Pragma可用于禁用缓存，Cache-Control提供了更灵活的缓存控制选项，而Cache是指存储在浏览器本地的缓存资源。

参考资料：

• 前端项目上线后，浏览器缓存未刷新问题
• 浏览器缓存机制详解