前端部署项目,通知用户刷新页面

53 阅读1分钟
// APP.vue 中调用此方法
    checkUpdate() {
      if (process.env.NODE_ENV !== "production") {
        // 非生产环境不处理
        return;
      }
      setInterval(async () => {
        try {
          fetch("./version.json")
            .then((res) => res.json())
            .then((data) => {
              let currentVesion = sessionStorage.getItem("version");
              if (currentVesion && data.version !== currentVesion) {
                setTimeout(() => {
                  // 延迟1s 防止样式还未加载完成
                  this.$confirm("检测到版本有更新,是否刷新页面?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      location.reload();
                    })
                    .catch(() => {});
                }, 1000);
              }
              sessionStorage.setItem("version", data.version);
            });
        } catch (error) {
          console.log("正在进行版本更新!");
        }
      }, 20 * 1000);
    },
//在public文件夹下创建version.json文件
{
    "version": "v1.0.1",
    "explain": "每次更新版本加1,用来提示用户刷新页面"
}