淺析Vue中入口快取的問題（程式碼分享）

在

之前的文章《你值得了解的HTTP快取機制（程式碼詳解）》中，給大家了解了HTTP快取機制。下面這篇文章給大家了解Vue中入口快取的問題，夥伴們來看看。

關於web的快取策略,推薦這篇文章：Http快取機制

在開發時候常常遇到一個問題，我們根據版本號去控制快取問題，當我們發布新版本，使用心得版本號的時候，發現html裡面引用的版本號卻是舊的版本號，原來是該html檔案被快取了，很多時候我們設定禁止html檔案被快取,但還是會出現被快取的情況。

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

為什麼我們有時候設定了f351569b22943d200c75ad4268539142這種強制性禁止快取,我們的頁面依然被緩存了？

因為我們只關注了客戶端，卻忽略了伺服器端的設置，如果伺服器端nginx設定了Cache-control，他是會覆蓋掉我們頁面中設定的的Cache-control的，所以有時候我們會發現明明css和js已經加了版本號，但是html檔案裡面引用的依然是舊的 css和js檔

一旦我們使用了全量更新，也就是每次發版本之前會幹掉之前的js和css文件，那麼index.html會無法載入先前的js，css還有一些其他的靜態資源文件，而新的js 和css則不會被載入, 那麼白螢幕就誕生了。

因為伺服器的快取機制，舊的css和js並不會被立即刪除，這種情況下, 需要配合伺服器來設定緩存，以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可以只設定一個

no-cache瀏覽器會快取，但刷新頁面或重新開啟時會請求伺服器，伺服器可以回應304，如果檔案有改變就會回應200

##no-store 瀏覽器不緩存，刷新頁面需要重新下載頁

推薦學習：

vue.js教學

以上是淺析Vue中入口快取的問題（程式碼分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！