我正在使用部署在 Docker 容器中的 Vuexy BootstrapVue 模板構建 Vue.js 應用程式。
我發現當我們將更新部署到我們的 Web 應用程式時，用戶必須在他們的瀏覽器中進行硬重繪 才能加載最新版本的應用程式，否則他們將瀏覽快取版本。
有沒有辦法強制客戶端瀏覽器為用戶加載最新版本？是每次加載還是每隔幾個小時？
（我已經標記了 Bootstrap-Vue 的透明度，但實際上不知道它是否與這個問題有任何關系）
uj5u.com熱心網友回復：
您正面臨快取問題，有多種方法可以解決此問題。
快取控制
您可以使用帶有max-age或的標題控制快取no-store，no-cache以簡單地禁用它，就像這個問題/答案：我們如何控制所有瀏覽器的網頁快取？
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control https://csswizardry.com/2019/03/cache-control-for-civilians/
快取破壞
Aappending a version (example: 1.0.0) to query string of the script tag:
<script src="path/to/your/app.min.js?v=1.0.0"
并為每個構建更改該版本。
散列腳本檔案
您還可以使用一些 webpack/rollup 配置來構建帶有哈希的腳本，例如 app.bf43112.js
網路包
const config = {
output: {
path: PATHS.build,
filename: "[name].[contenthash].js",
},
};
卷起
const isProduction = process.env.NODE_ENV === 'production';
export default {
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: isProduction ? 'bundle[hash].js' : 'public/build/bundle.js',
}
};
參考：使用 Rollup 散列檔案名
服務作業者
另一個我從未測驗過但聽起來不錯的解決方案是創建一個服務作業者來控制如何檢索 js 檔案：https : //developers.google.com/web/ilt/pwa/caching-files-with-服務人員
您可以執行一些操作，例如洗掉快取、使用您手動使用 js 獲取的回應來回應快取等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/314051.html