uni釋出H5頁面快取問題
阿新 • • 發佈:2021-11-30
uni打包釋出的H5,新使用者在瀏覽器開啟能瀏覽到新頁面,但是舊使用者在瀏覽器開啟頁面會存在快取問題,瀏覽到的還是舊頁面,使用瀏覽器強制重新整理後,可以瀏覽到頁面的新樣式更改了
發現編譯打包成H5版本的時候,打包出來的js檔案預設都沒有包含hash,原有的js檔名稱是一樣的
JS快取問題
在專案manifest.json同一級目錄下建立vue.config.js檔案,新增程式碼
let filePath = '' let Timestamp = '' //編譯環境判斷,判斷是否H5環境 if (process.env.UNI_PLATFORM === 'h5') { filePath = 'static/js/'; //打包檔案存放資料夾路徑 Timestamp = '.' + new Date().getTime();//時間戳 } module.exports = { configureWebpack: { // webpack 配置 解決js快取的問題 output: { // 輸出重構 打包編譯後的 檔案目錄 檔名稱 【模組名稱.時間戳】 filename: `${filePath}[name]${Timestamp}.js`, chunkFilename: `${filePath}[name]${Timestamp}.js` }, }, }
CSS樣式快取問題
檢視H5配置的模板檔案
修改模板檔案中引用css的地方,在引用css檔名的前面加入雜湊
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />