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

songxianling1992 發表於 2022-07-13
前端 Vue

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

1. 建立對比檔案

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

2. 獲取對比檔案

  • 在公共元件或者全域性方法中;建立10秒一次的輪詢定時器去輪詢version.json檔案;並且和本地資源的package.json對比;我是放到了layout.vue元件內;因為除了login頁面;其他頁面都是裝在layout內的;所以也可以理解為全域性元件。
  • 獲取兩個版本號

    • 系統內的
      image.png
    • 最新的(使用axios.get獲取;注意:設定axios不走快取
      image.png
    • 輸出效果
      image.png

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

  • layout.vue元件的created函式內;開啟一個每10秒一次的輪詢請求;旨在對比新老版本號是否一致並且是否需要重新整理
    image.png
  • 如果符合重新整理要求;則開始互動重新整理(使用者可能在提交表單或者儲存重要資訊);所以給使用者一個重新整理的過程提示他要重新整理了

    // 重新整理邏輯
    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)
      }
  • 展示效果
    image.png
寫在最後:此方案成本相對較小;不需要後端的配合就可以完成;以後的迭代中可擴充性也豐富。