欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路

 更新時(shí)間:2023年02月08日 11:26:24   作者:Naomi_233  
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前端版本更新檢查,實(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.htmlversion.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)文章

最新評(píng)論