VueJS /瀏覽器緩存生成版本

我有一個VueJS應用程序。當我運行npm run build時，它會創建一組新的dist/*文件，但是，當我將它們加載到服務器上時（在刪除舊版本之後）並在瀏覽器中打開該頁面，它會加載舊版本（來自緩存）。當我刷新頁面時，它加載新代碼沒有問題。VueJS /瀏覽器緩存生成版本

這是我的index.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
     <meta http-equiv="cache-control" content="max-age=0" /> 
     <meta http-equiv="cache-control" content="no-cache" /> 
     <meta http-equiv="expires" content="-1" /> 
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 
     <meta http-equiv="pragma" content="no-cache" /> 
     <link rel="stylesheet" href="/static/css/bootstrap.min.css"/> 
    </head> 
    <body> 
     <div id="app"></div> 
    </body> 
</html>

有沒有辦法迫使它每次或（理想）加載新的代碼，以檢查是否舊文件從服務器了，然後刷新瀏覽器嗎？

來源

2017-08-24 andrei

您是否嘗試過爲每個構建的文件名添加隨機哈希？這將強制瀏覽器「刷新」並加載新版本，但如果請求相同的文件散列，它仍會緩存它。 Angular 2做到了這一點。例如，'build.js'將是'build.32048uueo02348324.js'，其中hash表示構建的當前「版本」，並且當創建新構建時，舊文件將被銷燬而不是新文件一個不同的散列。這樣你就不必擔心任何HTTP頭，除非你想要更多的控制。 – Lansana

這可以幫助https://stackoverflow.com/questions/1011605/clear-the-cache-in-javascript – jakob

生成已經這樣做，這裏是我最新的版本的示例：'app.c6831a12f10f0ece2c67.js' – andrei

我們在這個相同的問題上苦苦掙扎，發現有些人的瀏覽器甚至不會拉動最新版本，除非他們手動刷新。我們在各個層次上緩存問題，包括我們託管文件的CDN。

我們還努力維護版本，並能夠在出現問題時快速重新部署以前的版本。

我們的解決方案（使用項目基於VUE-CLI的WebPack）：

1）我們建立的分佈有一個版本的特定文件夾，而不是靜態的。這也有助於我們跟蹤構建，並在需要時「撤消」部署。要更改'靜態'目錄，請更改index.js中'build'下的'assetsSubDirectory'，並將'assetsPublicPath'更改爲您的CDN路徑。

2）我們使用Webpack Assets Manifest構建指向所有資產的manifest.json文件。

3）我們上傳版本文件夾（包含js和css）到我們的CDN。

4）我們在後端服務器上託管一個動態的index.hmtl文件。後臺服務器使用從manifest.json中的數據中提取的模板系統填充樣式表和腳本的鏈接（請參閱＃5）。

5）要發佈新版本，我們將manifest.json發佈到後端服務器。我們通過GraphQL端點執行此操作，但您可以手動將json文件放在某處。我們將其存儲在數據庫中並使用它來填充index.html。

結果：立即更新和簡單的跟蹤和更改您的版本的能力。我們發現它會立即在所有用戶的瀏覽器中提供新版本。

另一項好處是：我們正在構建一個需要高安全性的應用程序，並且在我們已經安全的後端託管index.html使我們能夠更輕鬆地通過安全審計。

來源

2017-08-25 02:52:20

我覺得我的痛苦少得多。我讓客戶端請求服務器版本，然後將當前服務器版本與客戶端存儲在'localStorage'變量中的版本進行比較。如果它們不同，我會'window.location.reload（true）;'強制瀏覽器從服務器獲取新文件。至少它似乎工作。 – andrei

VueJS /瀏覽器緩存生成版本

回答

相關問題