之前的文章《你值得了解的HTTP緩存機(jī)制（代碼詳解）》中，給大家了解了HTTP緩存機(jī)制。下面本篇文章給大家了解Vue中入口緩存的問(wèn)題，伙伴們來(lái)看看吧。

關(guān)于web的緩存策略,推薦這篇文章：Http緩存機(jī)制

在開(kāi)發(fā)時(shí)候經(jīng)常遇到一個(gè)問(wèn)題，我們根據(jù)版本號(hào)去控制緩存問(wèn)題，當(dāng)我們發(fā)布新版本，使用心得版本號(hào)的時(shí)候，發(fā)現(xiàn)html里面引用的版本號(hào)卻是舊的版本號(hào) ，原來(lái)是該html文件被緩存了，很多時(shí)候我們?cè)O(shè)置禁止html文件被緩存,但依然會(huì)出現(xiàn)被緩存的情況。

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

為什么我們有時(shí)候設(shè)置了<meta http-equiv=”Cache-control”content=”no-store”>這種強(qiáng)制性禁止緩存,我們的頁(yè)面依然被緩存了？

因?yàn)槲覀冎魂P(guān)注了客戶端，卻忽略了服務(wù)器端的設(shè)置，如果服務(wù)器端nginx設(shè)置了Cache-control，他是會(huì)覆蓋掉我們頁(yè)面中設(shè)置的的Cache-control的，所以有時(shí)候我們會(huì)發(fā)現(xiàn)明明css和js已經(jīng)加了版本號(hào)，但是html文件里面引用的依然是舊的css和js文件

一旦我們使用了全量更新，也就是每次發(fā)版本之前會(huì)干掉之前的js和css文件，那么index.html會(huì)無(wú)法加載之前的js，css還有一些其他的靜態(tài)資源文件，而新的js和css則不會(huì)被加載, 那么白屏就誕生了。

因?yàn)榉?wù)器的緩存機(jī)制，舊的css和js并不會(huì)被立即刪除，這種情況下, 需要配合服務(wù)器來(lái)設(shè)置緩存，以nginx為例

location / {     root /home/www/test/dist;     index index.html;     try_files $uri $uri/ /index.html;     add_header Last-Modified $date_gmt;     add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';     if_modified_since off;     expires off;     etag off; }

no-cache,no-store可以只設(shè)置一個(gè)

no-cache瀏覽器會(huì)緩存，但刷新頁(yè)面或者重新打開(kāi)時(shí)會(huì)請(qǐng)求服務(wù)器，服務(wù)器可以響應(yīng)304，如果文件有改動(dòng)就會(huì)響應(yīng)200

no-store瀏覽器不緩存，刷新頁(yè)面需要重新下載頁(yè)

推薦學(xué)習(xí)：vue.js教程