Vue中入口緩存的問題怎么改良

本篇內容主要講解“Vue中入口緩存的問題怎么改良”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中入口緩存的問題怎么改良”吧!

在開發時候經常遇到一個問題，我們根據版本號去控制緩存問題，當我們發布新版本，使用心得版本號的時候，發現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" />

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

因為我們只關注了客戶端，卻忽略了服務器端的設置，如果服務器端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中入口緩存的問題怎么改良”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！