問題描述
大家用vue腳手架搭建前端工程時侦另，常被緩存問題所困擾秩命，具體的表現(xiàn)就是，當(dāng)程序版本升級時褒傅，用戶因為緩存訪問的還是老的頁面弃锐，然后很多同學(xué)很暴力的直接在index.html中加入了這幾行代碼：
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
升級時緩存問題倒解決了，但直接導(dǎo)致了用戶每次訪問你的程序時都要重新請求服務(wù)器殿托，所有的靜態(tài)資源都無法用緩存了霹菊，浪費流量，網(wǎng)絡(luò)壓力變大支竹。
需求澄清
我們真正需要解決的問題旋廷，不是單純的要緩存或者不要緩存，而是期望視情況而定：
程序每次升級后礼搁，用戶都不會因為緩存問題而執(zhí)行的仍然是老的程序饶碘。
若程序沒升級，用戶對靜態(tài)資源的請求則能用到緩存叹坦。
解決原理
由于vue腳手架每次打包時熊镣，都會將打出的靜態(tài)資源文件名加個哈希后綴，且index.html中引入時也加了對應(yīng)的哈希后綴募书，所以每個版本的靜態(tài)資源都是全新的绪囱，不用擔(dān)心因升級導(dǎo)致的緩存問題。那么只需讓index.html不緩存莹捡，且讓其他靜態(tài)資源緩存鬼吵，就能實現(xiàn)要求。
讓靜態(tài)資源有緩存好辦篮赢，問題在于怎么只讓index.html不緩存齿椅。這里我們已經(jīng)不能單單靠前端代碼來實現(xiàn)了，需要用到服務(wù)器配置启泣。通過服務(wù)器配置涣脚，來單獨設(shè)置請求index.html時的header，以達到控制緩存的目的寥茫。
具體實現(xiàn)
在vue.config.js中配置（沒有就創(chuàng)建vue.config.js文件）
// vue.config.js
if (process.env.UNI_PLATFORM === 'h5') {
// 由于這種方式的打包遣蚀，會導(dǎo)致編譯生成微信小程序（只驗證了微信小程序）無法正常使用，所以必須分開
let filePath = 'static/js/'
let Timestamp = new Date().getTime()
module.exports = {
// ... webpack 相關(guān)配置
filenameHashing: false,
configureWebpack: { // webpack 配置 解決js緩存的問題，目前只適配H5端打包
output: { // 輸出重構(gòu) 打包編譯后的 文件目錄 文件名稱 【模塊名稱.時間戳】
filename: `${filePath}[name].js?v=${Timestamp}`,
chunkFilename: `${filePath}[name].js?v=${Timestamp}`
},
}
}
}else{
// 其他打包需要的相關(guān)配置
module.exports = {
// ... webpack 相關(guān)配置
filenameHashing: false
}
}
