Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路
前端版本更新檢查,實(shí)現(xiàn)頁(yè)面自動(dòng)刷新
使用vite對(duì)項(xiàng)目進(jìn)行打包,對(duì) js 和 css 文件使用了 chunkhash 進(jìn)行了文件緩存控制,但是項(xiàng)目的index.html文件在版本頻繁迭代更新時(shí),會(huì)存在被瀏覽器緩存的情況。
在發(fā)版后,如果用戶不強(qiáng)制刷新頁(yè)面,瀏覽器會(huì)使用舊的index.html文件,在跳轉(zhuǎn)頁(yè)面時(shí)會(huì)向服務(wù)器端請(qǐng)求了上個(gè)版本 chunkhash 的 js 和 css 文件,但此時(shí)的文件已經(jīng)在版本更新時(shí)已替換刪除了,最終表現(xiàn)為頁(yè)面卡頓,控制臺(tái)報(bào)錯(cuò) 404。
解決思路
思路 1
服務(wù)器端發(fā)版時(shí),上一個(gè)版本的assets內(nèi)的文件不刪除。
缺點(diǎn)是會(huì)隨著頻繁發(fā)版,服務(wù)器端前端項(xiàng)目文件會(huì)越來(lái)越多,浪費(fèi)空間;若舊頁(yè)面的接口涉及到參數(shù)改動(dòng)等,會(huì)引起報(bào)錯(cuò);流水線使用 docker 打包部署會(huì)變得非常麻煩。
思路 2
在每次打包生產(chǎn)代碼時(shí),在public下生成一個(gè)version.json版本信息文件,頁(yè)面跳轉(zhuǎn)時(shí)請(qǐng)求服務(wù)器端的version.json中的版本號(hào)和瀏覽器本地緩存的版本號(hào)進(jìn)行對(duì)比,從而監(jiān)控版本迭代更新,實(shí)現(xiàn)頁(yè)面自動(dòng)更新,獲取新的index.html文件(前提是服務(wù)器端對(duì)index.html進(jìn)行不緩存配置)。
1.首先應(yīng)該禁止瀏覽器緩存index.html和version.json,這里實(shí)現(xiàn)nginx的不緩存處理
添加nginx配置
location ~ .*\.(htm|html|json)?$ { expires -1;}
2.使用Vite 插件打包時(shí)自動(dòng)生成版本信息
版本信息插件
// versionUpdatePlugin.js
const fs = require('fs')
const path = require('path')
const writeVersion = (versionFile, content) => {
// 寫(xiě)入文件
fs.writeFile(versionFile, content, (err) => {
if (err) throw err
})
}
export default (options) => {
let config
return {
name: 'version-update',
configResolved(resolvedConfig) {
// 存儲(chǔ)最終解析的配置
config = resolvedConfig
},
buildStart() {
// 生成版本信息文件路徑
const file = config.publicDir + path.sep + 'version.json'
// 這里使用編譯時(shí)間作為版本信息
const content = JSON.stringify({ version: options.version })
if (fs.existsSync(config.publicDir)) {
writeVersion(file, content)
} else {
fs.mkdir(config.publicDir, (err) => {
if (err) throw err
writeVersion(file, content)
})
}
},
}
}
vite 配置文件
// vite.config.js
export default defineConfig((config) => {
const now = new Date().getTime()
return {
...
define: {
// 定義全局變量
__APP_VERSION__: now,
},
plugins: [
...
versionUpdatePlugin({
version: now,
}),
],
...
}
})
3.路由跳轉(zhuǎn)時(shí),實(shí)時(shí)檢測(cè)版本
檢測(cè)到新版本自動(dòng)刷新頁(yè)面,應(yīng)該使用前置守衛(wèi),在跳轉(zhuǎn)失敗報(bào)錯(cuò)前檢測(cè),跳轉(zhuǎn)失敗不會(huì)觸發(fā)后置守衛(wèi)
const router = useRouter()
// 這里在路由全局前置守衛(wèi)中檢查版本
router.beforeEach(async () => {
await versionCheck()
})
// 版本監(jiān)控
const versionCheck = async () => {
if (import.meta.env === 'development') return
const response = await axios.get('version.json')
// eslint-disable-next-line no-undef
if (__APP_VERSION__ !== response.data.version) {
// eslint-disable-next-line no-undef
ElMessage({
message: '發(fā)現(xiàn)新內(nèi)容,自動(dòng)更新中...',
type: 'success',
showClose: true,
duration: 1500,
onClose: () => {
window.location.reload()
},
})
}
}
總結(jié)
到此這篇關(guān)于Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的文章就介紹到這了,更多相關(guān)Vite版本更新頁(yè)面自動(dòng)刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue2.0+Vux搭建一個(gè)完整的移動(dòng)webApp項(xiàng)目的示例
這篇文章主要介紹了Vue2.0+Vux搭建一個(gè)完整的移動(dòng)webApp項(xiàng)目的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue源碼學(xué)習(xí)defineProperty響應(yīng)式數(shù)據(jù)原理實(shí)現(xiàn)
這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)defineProperty響應(yīng)式數(shù)據(jù)原理實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
element-ui自定義message-box自定義樣式不生效的解決
這篇文章主要介紹了element-ui自定義message-box自定義樣式不生效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
Nuxt3項(xiàng)目搭建過(guò)程(Nuxt3+element-plus+scss詳細(xì)步驟)
這篇文章主要介紹了Nuxt3項(xiàng)目搭建(Nuxt3+element-plus+scss詳細(xì)步驟),本次記錄一次使用Nuxt3搭建前端項(xiàng)目的過(guò)程,內(nèi)容包含Nuxt3的安裝,基于Vite腳手架(默認(rèn))構(gòu)建的vue3項(xiàng)目,element-plus的安裝配置,scss的安裝,目錄結(jié)構(gòu)的創(chuàng)建和解釋,需要的朋友可以參考下2022-12-12
vue中實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗的兩種方法
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗的兩種方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12
vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
vue路由history模式頁(yè)面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁(yè)面刷新404解決方法(Koa?Express)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11

