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官網自定義模板自帶了這個哈希值