前端自动检测更新

原创 已于 2025-02-25 11:33:38 修改 · 746 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#前端 #javascript #开发语言
于 2025-02-25 10:52:16 首次发布

前言

这篇文章主要给大家介绍一下如何实现vue构建部署之后重新部署如何提示用户刷新更新页面。
项目地址

一、实现方案

  1. 每次打包的时候生成一个根据事件戳生成的一个时间戳文件
  2. 在主页面中不断请求这个文件，比较两次的内容是否一样，如果不一样则表示需要更新，否则不需要更新
  3. 由于需要轮询，所以将这个方法放在webworker中执行

二、实现步骤

1.编写打包插件，生成时间戳文件

import fs from 'fs'
import path from 'path'
const random = (config: any) => {
  const getARandomNumber = () => {
    console.log('执行')
    return new Date().getTime()
  }
  let randomNumber: any = null
  ;('')
  return {
    name: 'vite-plugin-vue-random',
    enforce: 'post' as 'post',
    buildStart() {
      randomNumber = getARandomNumber()
    },
    handleHotUpdate({ server, modules, timestamp }) {
      console.log(modules, timestamp)
    },
    writeBundle() {
      console.log(config.command, 'commadm')
      if (config.command === 'build') {
        // 如果没有dist文件夹，则创建
        const outputDir = path.resolve(process.cwd(), 'dist')
        if (!fs.existsSync(outputDir)) {
          fs.mkdirSync(outputDir)
        }
        console.log(randomNumber, '打包结束')
        const outputFilePath = path.join(outputDir, 'random.txt')

        // 将这个数据写入到 dist 目录中的 random.txt 文件
        try {
          fs.writeFileSync(outputFilePath, randomNumber.toString())
          console.log(randomNumber, '获取的随机数，已写入到', outputFilePath)
        } catch (e) {
          console.error(e)
        }
      }
    },
    // 打包结束
    buildEnd() {},
  }
}

export { random }

然后在vite.config.ts中引入该文件，在plugins中配置

 plugins: [
      vue(),
      vueJsx(),
      vueDevTools(),
      random(config),
    ],

2.编写轮询

App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { onMounted } from 'vue'
import { Button } from 'vant'

let worker: Worker | null = null
// let oldHtml = ''
onMounted(() => {
  console.log(213)
  // 初始化执行
  workerFun()
  // 获取加载的js文件
  // 如果是生产环境
  // 监听当前页面是否可见

  document.addEventListener('visibilitychange', () => {
    // 如果可见
    worker?.terminate()
    worker = null
    console.log(document.visibilityState, '1111111')
    if (document.visibilityState === 'visible') {
      console.log('页面可见')
      workerFun(false)
    } else {
      worker = null
    }
  })
})
const workerFun = (ischange = false) => {
  if (import.meta.env.MODE === 'production') {
    worker = new Worker(new URL('./works/updateSource.ts', import.meta.url))
    let oldHtml = localStorage.getItem('oldHtml') || ''
    worker.postMessage({ type: 'update', oldHtml })
    worker.onmessage = (e) => {
      if (e.data.message === 1) {
        if (confirm('是否更新资源')) {
          location.reload()
          // oldHtml = e.data.newHtml
          localStorage.setItem('oldHtml', e.data.newHtml)
          // window.location.reload(true) 从服务器重新加载
        }
      }
    }
  }
}
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
      <div class="test">test 数据2</div>
      <Button type="success">主要按钮</Button>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
.test {
  width: 120px;
  font-size: 25px;
  height: 40px;
}
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

updateSource.ts内容

let timeInterval: any = null
// let html = ''
let html = ''
// 请求获取当前页面
async function updateSource() {
  // 加上时间戳，防止缓存
  //   const url = `/?t=${Date.now()}`
  //   const res = await fetch(url)
  //   const htmls = await res.text()
  const respons = await fetch(`/random.txt?t=${Date.now()}`)
  //   console.log(await respons.text(), 'respons')
  const text = await respons.text()
  // console.log(htmls,'htmls')
  return text
}
// 判断是否需要更新
async function isUpdate() {
  const newHtml = await updateSource()
  console.log(newHtml, html, 111)
  if (newHtml !== html) {
    clearInterval(timeInterval)
    // 提示需要更新
    self.postMessage({ message: 1, newHtml })
    html = newHtml
  }
}
self.addEventListener('message', async (event: MessageEvent) => {
  let { type, oldHtml } = event.data
  if (type === 'update') {
    //    先获取第一次数据

    html = oldHtml
    oldHtml = await updateSource()

    timeInterval && clearInterval(timeInterval)
    timeInterval = setInterval(() => {
      isUpdate()
    }, 2000)
  }
})

接下来我将详细说一下代码逻辑，核心是updateSource.ts文件

  1. app.vue通知updateSource开始轮询查询数据
  2. webworker中通过message后先获取第一次的数据，然后开始进行轮询接口获取random.txt文件的数据（通过random.ts插件打包生成），比较两次是否一致
  3. 如果不一致通过postmessage通知主线程需要进行更新
  4. 主线程收到通知给出提示
    其实以上逻辑已经完全可以实现了，但是很明显，上面的代码案例不仅仅只有我描述的这些；主要是做了一些优化：在页面看不到的情况下，比如浏览器最小化或者切换到其他标签页的时候，这个轮询将会被停止，所以加上了下面的代码
 document.addEventListener('visibilitychange', () => {
    // 如果可见
    worker?.terminate()
    worker = null
    console.log(document.visibilityState, '1111111')
    if (document.visibilityState === 'visible') {
      console.log('页面可见')
      workerFun(false)
    } else {
      worker = null
    }
  })

只有当页面可见的时候才会执行webworker的代码，不过按照上述方法的话，每次会重新加载webworker的代码，会导致更新提示不准确（即便没有资源更新也会提示更新），所以每次将获取最新的random.txt内容放入缓存中，每次比较的缓存中的跟最新的，能够保证webworker重新加载之后比较正确
以下是部分代码：

const workerFun = (ischange = false) => {
  if (import.meta.env.MODE === 'production') {
    worker = new Worker(new URL('./works/updateSource.ts', import.meta.url))
    let oldHtml = localStorage.getItem('oldHtml') || ''
    worker.postMessage({ type: 'update', oldHtml })
    worker.onmessage = (e) => {
      if (e.data.message === 1) {
        if (confirm('是否更新资源')) {
          location.reload()
          // oldHtml = e.data.newHtml
          localStorage.setItem('oldHtml', e.data.newHtml)
          // window.location.reload(true) 从服务器重新加载
        }
      }
    }
  }
}
//updateSource.ts
self.addEventListener('message', async (event: MessageEvent) => {
  let { type, oldHtml } = event.data
  if (type === 'update') {
    html = oldHtml
    // oldHtml = await updateSource()
    timeInterval && clearInterval(timeInterval)
    timeInterval = setInterval(() => {
      isUpdate()
    }, 2000)
  }
})
const newHtml = await updateSource()
  console.log(newHtml, html, 111)
  //每次比较的都是缓存的数据跟最新的数据比较
  if (newHtml !== html) {
    clearInterval(timeInterval)
    // 提示需要更新 再将新数据返回主线程放入缓存中
    self.postMessage({ message: 1, newHtml })
    html = newHtml
  }

注意：当打开控制台的时候visibilitychange会有问题，即使切换到不可见，也会默认为可见状态，这会导致测试通过控制台并不容易测试，可以通过nginx配置请求日志来查看记录

server {
		# gzip on;
		# gzip_static on;
		# gzip_min_length 1k;
		# gzip_buffers 4 16k;
		# gzip_comp_level 2;
		# gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/png image/jpeg image/svg+xml image/gif;
		# gzip_vary off;
		# gzip_disable "MSIE [1-6].";

        server_name  localhost;

        #charset koi8-r;

        access_log  logs/access.log;

总结

以上就是通过轮询实现自动检测更新，但是缺点就是要不断访问数据，对服务端压力比较大，好处是之后每次更新不需要做任何配置和修改；
当然还有其他方法大家可以自行查阅资料

欧阳天风
关注
使用 Vue 纯前端实现发布版本检测并自动刷新功能
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
11-26 675
在前端项目中，频繁更新后的缓存问题是常见的痛点之一。即使上线了最新版本，部分用户可能因为浏览器缓存而使用了旧版本资源。本文将详细介绍如何在 Vue 项目中实现发布版本检测，通过生成。，比对当前版本是否已过期。如果检测到版本更新，则强制刷新页面。在打包时，利用 Webpack 插件生成一个包含时间戳的。文件，并在浏览器中进行自动刷新，解决缓存问题。文件，用来标记当前发布版本。在前端项目中，可以通过。
纯前端检查是否有发版，并提示用户刷新
weixin_38984353的博客
02-11 1194
但问题在于，每次构建后，前端代码的版本变量会更新，但用户如果缓存了旧代码，仍然无法获取新版本变量。因此，HTML文件的缓存问题需要处理，通常可以通过服务器设置HTML文件的缓存策略为不缓存，或者较短的有效期。因此，需要在请求版本文件时避免缓存，可以通过在URL中添加查询参数，比如时间戳，或者配置服务器对该文件禁用缓存。还有一种方法是检查当前加载的HTML文件的last-modified时间，但前端无法直接获取服务器文件的修改时间，除非通过接口返回，但这需要后端配合，不符合纯前端的要求。
前端发布项目自动更新
m0_53273062的博客
01-03 927
思路：无论vue还是react打包都会有dist文件夹，内部有index.html。我是想根据index.html中的script src地址是否改变，判断项目是否有新内容。首先先拿到生产环境中index.html文本，由于是单页面应用使用fetch('/?_stamp='+Date.now())来拿到html文本。并获取所有的src地址。全局定义lastSrcs表示旧的地址数组，然后和新的newScripts对比，如果长度不同或者某一项不同则表示项目有新内容更新。最终我们使用轮询的方式监听是否变化。
vue项目自动检测版本更新
weixin_45007276的博客
07-22 2257
vue项目自动检测版本更新,使用setInterval轮询，无其他额外操作
如何解决前端上线之后，用户所在页面不刷新也会自动更新
朱远辉的博客
05-08 3834
当前所在页面不刷新会出现其他页面已经更新但当前页面没有更新的情况。这种情况下，通常需要通过前端代码来处理。一种解决办法是在前端代码中，添加一个定时器，定期去检查后台服务是否有更新。如果检测到新版本，可以使用 JavaScript 程序重新加载相应的资源，让用户可以获得新内容。
前端实现版本更新自动检测✅
weixin_45511682的博客
03-06 2472
本文详细介绍了在现代Web应用中，特别是在单页面应用（SPA）环境下，如何实现前端版本更新的自动检测和提示用户刷新的功能。通过这种机制，可以有效避免用户因使用旧版代码而遇到的问题，确保功能一致性、减少接口兼容性问题并提高应用的可靠性。
前端如何实现代码更新自动检测？一文揭秘！
weixin_69642284的博客
06-12 1578
前端代码更新自动检测是一个看似简单，实则复杂且重要的技术环节。从基于时间戳、文件哈希值的基础方法，到利用 HTTP 协议特性的巧妙实现，再到实时更新检测的前沿技术，每一种方式都有其独特的优势和适用场景。在实际项目中，我们需要根据项目的具体需求、性能要求以及用户体验目标，选择合适的检测方法，甚至可以结合多种方式，以达到最佳的代码更新检测效果。随着前端技术的不断发展，未来或许会出现更智能、更高效的代码更新检测方案，例如基于人工智能的自动检测，能够更精准地预测和识别代码变化。
前端如何在生成环境下实现自动检测更新
qq_45487080的博客
10-17 926
建立一个WebSocket连接，服务器在发布新版本时通过WebSocket向客户端发送更新通知。优点：实时性强，能够即时通知客户端更新。缺点：需要额外的服务器资源来维护WebSocket连接，且可能受到网络延迟和稳定性问题的影响。
前端部署后自动检测更新
weixin_48309048的博客
12-03 162
前端部署后自动检测更新
前端版本自动更新
qq_55139096的博客
03-24 406
首先需要在public目录新建version.json文件，再使用axios请求自身服务器(小知识：axios.get('/')会被重定向至public文件夹，故此axios.get('/version')会请求到public录下的version.json文件)npm run build时自动更新版本号(自写plugin),在vite.config.js中引入并注册使用。
自动检测更新
SongZhengxing_的博客
06-08 371
新建 auto-update.js。在 main.js 中引入即可。
vue项目部署自动检测更新
烈阳，
07-19 1761
这年头前端部署项目，你还在用websocket提醒用户更新？简直太low啦！快来学学如何用指纹对比更新吧~
VUE自动检测版本更新_vue版本更新，HarmonyOS鸿蒙 工作资料
2401_84166965的博客
04-15 680
仔细观察返回数据不难发现script标签里的 所对应的文件路径是./assets/index.b3865953.js 这是由于前端工程化会自动给文件带上文件指纹，只要这些文件有变动，那么这些文件指纹也就是hash值也会跟着变化，每隔一小段时间去分析页面中script元素的js，只要发现js路径有变化，说明这个系统是有所改动。每隔两秒调用 needUpdate检查更新函数，判断是否有变化，有更新则提示用户刷新页面，然后在调用自身，不断的进行检查，从而达到提示更新的目的。//调用newScripts。
vue系统升级后自动刷新浏览器（纯前端）
weixin_40563746的博客
02-26 739
摘要：本文介绍了一种基于版本号强制刷新浏览器的方法，适用于Vue2项目。通过在public文件夹创建appVersion.json存储版本号，并在打包时自动更新版本号（使用updateVersion.js）。路由跳转时对比缓存版本号与新版本号，不一致则强制刷新。具体实现包括：1)创建版本文件；2)编写更新脚本；3)路由监听；4)修改打包命令；5)服务器缓存配置。该方法确保用户始终访问最新版本，解决浏览器缓存问题。
vue3 - vue项目自动检测更新
iotjin的专栏
07-11 1156
web项目当页面检测到需要更新，然后弹框提示是否更新（刷新页面）这种可以通过纯前端实现也可以通过接口实现。
【SpringBoot中配置websocket，实现前端数据自动更新】
weixin_47185482的博客
06-15 1273
websocket的应用——实现前端数据自动更新
Vue＜前端页面版本检测＞
最新发布
2401_86373285的博客
02-02 414
构建阶段 → 版本文件生成 → 运行时检测 → 版本对比 → 用户提醒。
vue3+vite纯前端实现自动触发浏览器刷新更新版本内容，并在打包时生成版本号文件
m0_74823963的博客
12-10 2298
在前端项目中，有时候为了实现自动触发浏览器刷新并更新版本内容，可以采取一系列巧妙的措施。我的项目中是需要在打包时候生成一个version.js文件，用当前打包时间作为版本的唯一标识，然后打包发版，从实现对版本更新的监控。因为项目使用vite打包的，vite又是基于rollup打包，rollup不像webpack有可以实现增量构建；而是每次打包，所有文件的hash都会更新，这样就会导致浏览器缓存的资源失效。
不靠后端，前端自己实现发版后页面提示用户版本更新
weixin_58852774的博客
02-22 731
通过利用Webpack根据内容生成文件名的特性，结合fetch请求和时间戳，我们实现了一个简单但有效的版本更新提示功能。这个方案不仅解决了用户和开发者的困扰，还展示了如何在前端实现轮询检测和发布订阅模式的应用。虽然代码并不复杂，但使用面向对象的写法可以使代码更加清晰和易于维护。希望这个方案能为大家在类似场景下的开发提供一些参考和启发。
前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案二：轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样
金乌的博客
11-27 4035
当我们重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在功能使用差异性的问题，因此，当前端部署项目后，需要提醒用户有去重新加载页面。根据打完包之后生成的script src 的hash值去判断，每次打包都会生成唯一的hash值，只要轮询去判断不一样了，那一定是重新部署了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值