Vue 部署後強制客戶端重新整理獲取最新的程式碼資源【純前端】

背景：自己的專案修復了bug；但是客戶端沒有重新整理瀏覽器；導致還是有bug的資原始碼；出現了問題
思路：結合Vue 部署後怎麼強制客戶端重新整理獲取最新的程式碼資源？裡面的方案；分3步曲實現生產環境部署後資源重新整理

1. 建立對比檔案

vue專案中的package.json中儲存當前打包資源的當前版本號
放置最新的版本號jsonversion.json（以此為準）；放到public檔案中放置webpack進行打包編譯；並且維護一個輔助欄位must代表是否必須強制重新整理；當前預設bug級別才會強制重新整理；優化和新功能不用強制重新整理

2. 獲取對比檔案

在公共元件或者全域性方法中；建立10秒一次的輪詢定時器去輪詢version.json檔案；並且和本地資源的package.json對比；我是放到了layout.vue元件內；因為除了login頁面；其他頁面都是裝在layout內的；所以也可以理解為全域性元件。
獲取兩個版本號
- 系統內的
- 最新的（使用axios.get獲取；注意：設定axios不走快取）
- 輸出效果

3. 開始對比並且後續邏輯

在layout.vue元件的created函式內；開啟一個每10秒一次的輪詢請求；旨在對比新老版本號是否一致並且是否需要重新整理

如果符合重新整理要求；則開始互動重新整理（使用者可能在提交表單或者儲存重要資訊）；所以給使用者一個重新整理的過程提示他要重新整理了

// 重新整理邏輯
reloadNotifier() {
    let time = 20
    const key = `open${Date.now()}`
    this.$notification.open({
      message: '系統提示',
      description: `系統版本有更新，請儘快儲存當前資訊！將在${time}秒後重新整理瀏覽器！`,
      duration: null,
      icon: <a-icon type="alert" style="color: #108ee9" />,
      closeIcon: <span></span>,
      btn: h => {
        return h(
          'a-button',
          {
            props: {
              type: 'primary'
            },
            on: {
              click: () => window.location.reload()
            }
          },
          '立即重新整理'
        );
      },
      key
    })
    // 動態修改倒數計時
    this.notificationTimer = setInterval(() => {
      time--
      if (time < 1) {
        window.location.reload()
        clearInterval(this.notificationTimer)
        this.$notification.close(key)
      }
      this.$notification.open({
        message: '系統提示',
        description: `系統版本有更新，請儘快儲存當前資訊！將在${time}秒後重新整理瀏覽器！`,
        duration: null,
        icon: <a-icon type="alert" style="color: #108ee9" />,
        closeIcon: <span></span>,
        btn: h => {
          return h(
            'a-button',
            {
              props: {
                type: 'primary'
              },
              on: {
                click: () => window.location.reload()
              }
            },
            '立即重新整理'
          );
        },
        key
      });
    }, 1000)
  }

展示效果

寫在最後：此方案成本相對較小；不需要後端的配合就可以完成；以後的迭代中可擴充性也豐富。

Vue 部署後強制客戶端重新整理獲取最新的程式碼資源【純前端】

1. 建立對比檔案

2. 獲取對比檔案

3. 開始對比並且後續邏輯

相關文章