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

為什么我們有時候設置了<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.js教程