Vue項(xiàng)目打包部署后瀏覽器自動(dòng)清除緩存問題的解決方法
一、報(bào)錯(cuò)如下：
每次build打包部署到服務(wù)器上時(shí)，偶爾會(huì)出現(xiàn)前端資源文件不能及時(shí)更新到最新，瀏覽器存在緩存問題，這時(shí)在當(dāng)前頁面進(jìn)行按鈕點(diǎn)擊等事件處理時(shí)，控制臺報(bào)錯(cuò)chunk load error，如下顯示：
原因：通過查看當(dāng)前sources里的文件，可以發(fā)現(xiàn)：控制臺報(bào)錯(cuò)提示中所請求的js文件哈希值跟sources緩存的文件哈希值并不一樣，說明 當(dāng)前頁面請求了緩存，然而由于資源文件被更新 導(dǎo)致找不到 出現(xiàn)404的情況。
直接解決辦法：清除瀏覽器緩存。（但是每次部署 都要讓用戶重新清一次緩存不是很友好）下面通過其他方式解決這個(gè)問題。
二、解決：
1、在index.html入口文件處設(shè)置meta標(biāo)簽，清除頁面緩存。
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="expires" content="0">
2、vue.config.js 配置js、css打包配置，在css、js打包文件添加版本號時(shí)間戳，區(qū)別版本
const path = require('path')
const timeStamp= new Date().getTime()
const isPro = process.env.NODE_ENV === 'production'
module.exports = {
configureWebpack: {
output: {
filename: `js/[name].js?v=${timeStamp}`,
chunkFilename: `js/[name].js?v=${timeStamp}`,
},
},
css: {
// 輸出重構(gòu) 打包編譯后的css文件名稱，添加時(shí)間戳
extract: {
filename: `css/[name].${timeStamp}.css`,
chunkFilename: `css/[name].${timeStamp}.css`,
},
}
}
這樣每次打包出來的js文件都不一樣，也就解決了瀏覽器的緩存問題。
Tips
filename： 指列在 entry（入口） 中，打包后輸出的文件的名稱chunkFilename： 指未列在 entry 中，卻又需要被打包出來的文件的名稱（懶加載的文件）
三.打包測試
發(fā)現(xiàn) JS 后參數(shù)帶上我設(shè)置的時(shí)間戳啦，測試成功。
清除瀏覽器 localStorage 緩存
1、更新package.json中的 version 值，每次打包往上遞增
2、main.js中，根據(jù) version 判斷是否進(jìn)行緩存清理
const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem('appVersion')
if(VUE_APP_VERSION != vers){
localStorage.clear()
window.localStorage.setItem('appVersion', VUE_APP_VERSION)
location.reload()
}
Tips
有時(shí)版本不一樣，可以找webpack.prod.conf文件進(jìn)行修改噢~
到此這篇關(guān)于Vue項(xiàng)目打包部署后瀏覽器自動(dòng)清除緩存問題的解決方法的文章就介紹到這了,更多相關(guān)Vue瀏覽器自動(dòng)清除緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue + el-tree 實(shí)現(xiàn)插入節(jié)點(diǎn)自定義名稱數(shù)據(jù)的代碼
這篇文章主要介紹了vue + el-tree 實(shí)現(xiàn)插入節(jié)點(diǎn)自定義名稱數(shù)據(jù)的代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決
這篇文章主要介紹了基于vue 動(dòng)態(tài)菜單 刷新空白問題的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實(shí)現(xiàn)
這篇文章主要介紹了Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
錯(cuò)誤處理是框架設(shè)計(jì)的核心要素之一,框架的錯(cuò)誤處理好壞,直接決定用戶應(yīng)用程序的健壯性以及用戶開發(fā)應(yīng)用時(shí)處理錯(cuò)誤的心智負(fù)擔(dān),本文將從源碼入手,剖析一下Vue3中是如何進(jìn)行錯(cuò)誤處理的,需要的可以參考下2024-01-01
Vue2.4+新增屬性.sync、$attrs、$listeners的具體使用
這篇文章主要介紹了Vue2.4+新增屬性.sync、$attrs、$listeners的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
基于ElementUI實(shí)現(xiàn)v-tooltip指令的示例代碼
文本溢出隱藏并使用tooltip 提示的需求,相信在平時(shí)的開發(fā)中會(huì)經(jīng)常遇到,常規(guī)做法一般是使用 elementui 的 el-tooltip 組件,在每次組件更新的時(shí)候去獲取元素的寬度/高度判斷是否被隱藏,本文給大家介紹了基于ElementUI實(shí)現(xiàn)v-tooltip指令,需要的朋友可以參考下2024-09-09
使用Vue自定義數(shù)字鍵盤組件(體驗(yàn)度極好)
最近做 Vue 開發(fā)，因?yàn)橛胁簧夙撁嫔婕暗浇痤~輸入，產(chǎn)品老是覺得用原生的 input 進(jìn)行金額輸入的話 體驗(yàn)很不好，于是自己動(dòng)手寫了一個(gè)使用Vue自定義數(shù)字鍵盤組件，具體實(shí)現(xiàn)代碼大家參考下本文2017-12-12
Vue響應(yīng)式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應(yīng)式原理-理解Observer、Dep、Watcher,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06