uni-app開發公衆号H5時防止頁面被緩存的處理

本文作者：薛定喵君

原文位址：

http://xuedingmiao.com/blog/uniapp_avoid_cache.html

背景

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

解決方法

确定需要修改的檔案，首先我們要看

src/manifest.json

裡面定義的

template

字段，根據值找到模闆檔案。

例如：

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是指令行建立的，這樣在伺服器上打包的時候才可以加載使用。

然後輸入如下内容：

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後面跟上版本，進而使微信浏覽器在每次釋出後都加載新的頁面js保證最新。

參考資料

• vue-config
• 建立uni-app