背景

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

確定需要修改的文件，首先我們要看 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" />

如果已經(jīng)自帶了這個哈希值則不用做這個處理。

JS 緩存處理

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

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

然后輸入如下內(nèi)容：

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

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

本文源自：極.客.之路-薛.定.瞄*君，版權(quán)歸原作者所有。