當(dāng)前端頁(yè)面開(kāi)發(fā)測(cè)試完成后進(jìn)行上線時(shí)，有時(shí)候在將更新的頁(yè)面上傳到服務(wù)器之后，瀏覽器并沒(méi)有立即展示新的頁(yè)面，而繼續(xù)渲染舊的頁(yè)面。這是因?yàn)闉g覽器默認(rèn)會(huì)對(duì)已訪問(wèn)過(guò)的頁(yè)面進(jìn)行緩存，以提高性能。因此，當(dāng)頁(yè)面內(nèi)容發(fā)生變動(dòng)時(shí)，瀏覽器會(huì)仍然使用緩存中的舊頁(yè)面，而無(wú)法獲取到最新的頁(yè)面內(nèi)容。
雖然刷新或者清除緩存能解決這方面的問(wèn)題，但是用戶并不知道什么時(shí)候需要清除緩存，或者根本不知道如何操作。
所以，需要解決文件變動(dòng)后瀏覽器沒(méi)有更新的問(wèn)題。
解決方案
一般情況下css、js 和 img 的名字都加了哈希值，所以新版本和就版本的名字是不同的，不會(huì)有緩存問(wèn)題。
但是把打包好的index.html放到服務(wù)器后，index.html在服務(wù)器端可能是有緩存的。
所以只要 入口文件不緩存 這樣就解決問(wèn)題了。在入口文件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響應(yīng)頭中設(shè)置Expires字段，用于指定頁(yè)面的過(guò)期時(shí)間。當(dāng)瀏覽器在過(guò)期時(shí)間之前再次請(qǐng)求同一資源時(shí)，如果服務(wù)器返回的響應(yīng)中包含"Expires"字段且未過(guò)期，瀏覽器將直接使用緩存的資源，而不再向服務(wù)器發(fā)送請(qǐng)求。Expires是HTTP 1.0版本引入的機(jī)制，但它存在一些問(wèn)題，比如無(wú)法處理時(shí)鐘不同步、不靈活的過(guò)期時(shí)間等。
Pragma：在HTTP請(qǐng)求頭中使用Pragma字段，通常值為"no-cache"。當(dāng)瀏覽器發(fā)送請(qǐng)求時(shí)，如果請(qǐng)求頭中帶有Pragma字段且值為"no-cache"，服務(wù)器將不使用緩存，并強(qiáng)制要求服務(wù)器每次都返回新的響應(yīng)。然而，Pragma的使用已經(jīng)過(guò)時(shí)，Cache-Control是現(xiàn)代瀏覽器更推薦的緩存控制方式。
Cache-Control：在HTTP響應(yīng)頭中使用Cache-Control字段來(lái)控制緩存行為。Cache-Control是HTTP 1.1版本引入的緩存機(jī)制，提供了更為靈活和強(qiáng)大的緩存控制選項(xiàng)。通過(guò)設(shè)置Cache-Control的值，可以指定緩存的策略，如"no-cache"（不使用緩存）、"public"（可以被任何人緩存）、"private"（只能被瀏覽器緩存）、"max-age"（緩存的最長(zhǎng)時(shí)間）等等。
Cache：Cache（緩存）是指瀏覽器在第一次請(qǐng)求某個(gè)資源后，將該資源保存在本地存儲(chǔ)中的一部分。這樣，在再次請(qǐng)求同一個(gè)資源時(shí)，瀏覽器可以直接從本地緩存中獲取資源，而無(wú)需重新下載。通常，瀏覽器緩存可以提升網(wǎng)頁(yè)加載速度，減輕服務(wù)器負(fù)擔(dān)。
綜上所述，Expires指定資源的過(guò)期時(shí)間，Pragma可用于禁用緩存，Cache-Control提供了更靈活的緩存控制選項(xiàng)，而Cache是指存儲(chǔ)在瀏覽器本地的緩存資源。
