快捷導(dǎo)航

Vite版本更新檢查實現(xiàn)頁面自動刷新的解決思路

更新時間：2023年02月08日 11:26:24 作者：Naomi_233

這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實現(xiàn)頁面自動刷新的解決思路,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

前端版本更新檢查，實現(xiàn)頁面自動刷新

使用vite對項目進行打包，對 js 和 css 文件使用了 chunkhash 進行了文件緩存控制，但是項目的index.html文件在版本頻繁迭代更新時，會存在被瀏覽器緩存的情況。

在發(fā)版后，如果用戶不強制刷新頁面，瀏覽器會使用舊的index.html文件，在跳轉(zhuǎn)頁面時會向服務(wù)器端請求了上個版本 chunkhash 的 js 和 css 文件，但此時的文件已經(jīng)在版本更新時已替換刪除了，最終表現(xiàn)為頁面卡頓，控制臺報錯 404。

解決思路

思路 1

服務(wù)器端發(fā)版時，上一個版本的assets內(nèi)的文件不刪除。

缺點是會隨著頻繁發(fā)版，服務(wù)器端前端項目文件會越來越多，浪費空間；若舊頁面的接口涉及到參數(shù)改動等，會引起報錯；流水線使用 docker 打包部署會變得非常麻煩。

思路 2

在每次打包生產(chǎn)代碼時，在public下生成一個version.json版本信息文件，頁面跳轉(zhuǎn)時請求服務(wù)器端的version.json中的版本號和瀏覽器本地緩存的版本號進行對比，從而監(jiān)控版本迭代更新，實現(xiàn)頁面自動更新，獲取新的index.html文件（前提是服務(wù)器端對index.html進行不緩存配置）。

1.首先應(yīng)該禁止瀏覽器緩存index.html和version.json，這里實現(xiàn)nginx的不緩存處理

添加nginx配置

location ~ .*\.(htm|html|json)?$ {    expires -1;}

2.使用Vite 插件打包時自動生成版本信息

版本信息插件

// versionUpdatePlugin.js
const fs = require('fs')
const path = require('path')

const writeVersion = (versionFile, content) => {
  // 寫入文件
  fs.writeFile(versionFile, content, (err) => {
    if (err) throw err
  })
}

export default (options) => {
  let config

  return {
    name: 'version-update',

    configResolved(resolvedConfig) {
      // 存儲最終解析的配置
      config = resolvedConfig
    },

    buildStart() {
      // 生成版本信息文件路徑
      const file = config.publicDir + path.sep + 'version.json'
      // 這里使用編譯時間作為版本信息
      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)時，實時檢測版本

檢測到新版本自動刷新頁面，應(yīng)該使用前置守衛(wèi)，在跳轉(zhuǎn)失敗報錯前檢測，跳轉(zhuǎn)失敗不會觸發(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)容，自動更新中...',
      type: 'success',
      showClose: true,
      duration: 1500,
      onClose: () => {
        window.location.reload()
      },
    })
  }
}