1. 程式人生 > 其它 >uni釋出H5頁面快取問題

uni釋出H5頁面快取問題

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

uni官網自定義模板自帶了這個雜湊值