uni-app開發(fā)微信公眾號H5時防止頁面被緩存的處理
2021-10-27 14:34:29

本文作者：薛定喵君
原文地址：http://xuedingmiao.com/blog/uniapp_avoid_cache.html

背景

修改頁面后重新打包，測試人員在確認問題時總是說沒改，頁面沒有變化，需要進行繁瑣的清緩存操作才能獲取到最新版本。

解決方法

確定需要修改的文件，首先我們要看 src/manifest.json 里面定義的 template 字段，根據(jù)值找到模板文件。

例如： public/index.html。

緩存的文件主要是css和js兩種，所以我們要分別處理。

樣式緩存處理

我們只需要修改模板文件中引用css的地方，在引用css文件名的前面加入哈希。類似下面這種方式：

<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />

如果已經自帶了這個哈希值則不用做這個處理。

JS緩存處理

修改入口頁面的js引用機制，加入時間戳。

具體要在項目根目錄下添加一個vue.config.js配置，需要你的APP是命令行創(chuàng)建的，這樣在服務器上打包的時候才可以加載使用。

然后輸入如下內容：

if (process.env.UNI_PLATFORM === 'h5') {
    let filePath = 'static/js/'
    let Timestamp = new Date().getTime()
    module.exports = {
        // webpack配置
        filenameHashing: false,
        configureWebpack: { // webpack 配置 解決js緩存的問題
            output: { // 輸出重構  打包編譯后的 文件目錄/文件名稱?v=時間戳
                filename: `${filePath}[name].js?v=${Timestamp}`,
                chunkFilename: `${filePath}[name].js?v=${Timestamp}`
            },
        }
    }
} else {
    // 其他打包配置
    module.exports = {
        // webpack 相關配置
        filenameHashing: false
    }
}

這樣在打包的時候就會在引用的頁面js后面跟上版本，從而使微信瀏覽器在每次發(fā)布后都加載新的頁面js保證最新。

參考資料

• vue-config
• 創(chuàng)建uni-app