前端部署新版本，如何高效通知用户刷新页面？

实时更新通知

• 使用WebSocket或Server-Sent Events（SSE）等技术，可以实现服务器与客户端的实时通信。当有新版本发布时，服务器会通过这些技术将更新通知推送给客户端，前端接收到通知后，可以弹出提示框告知用户当前页面有新版本，建议刷新页面以获取最新内容。

轮询检测更新

• 在前端代码中设置一个定时器，轮询检测更新通常用于检测服务端资源（如HTML文件、JS文件）是否发生变化。例如，通过轮询获取index.html文件的版本号。这种方式比较消耗服务器

// 在main.js中引入自动更新功能
import { checkForUpdate } from './auto-update.js';
// 初始化自动更新
checkForUpdate();

// auto-update.js 
import aiosx from "axios"
function checkForUpdate() {
   const metaTag = document.querySelector('meta[name="version"]');
   const currentVersion = metaTag ? metaTag.getAttribute('content') : null;
    axios.get('xxxx').then(res=>{
        if (res.status === 200) {
           const serverVersion = res.responseText;
           if (serverVersion !== currentVersion) {
               alert('页面已更新，请刷新页面以查看最新内容');
           }
       }
    })
}
​
// 设置轮询间隔时间（例如每5分钟）
setInterval(checkForUpdate, 5 *60* 1000);

版本号控制（推荐）

• 在每次部署时生成一个唯一的版本号文件（如version.json），并在前端请求时携带当前版本号。通过比较前端版本号与后端版本号，判断是否需要刷新页面。如果检测到版本更新，前端会提示用户刷新。

1. 创建 version.json 文件

首先，在项目中创建一个 version.json 文件，用于存储当前项目的版本号。这个文件可以在构建时自动生成，并且每次构建时更新版本号。

//会在public/version.json中自动生成，无需手动创建
{
  "version": 1737423874141
}

2. 构建阶段生成版本文件

在构建阶段，使用构建工具（如 Vite 或 Webpack）生成 version.json 文件，并更新版本号。以下是使用 Vite 的示例：

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
import fs from 'fs';
​
function updateVersion() {
  return {
    name: 'update-version',
    buildStart() {
       const versionData = { version: new Date().getTime() };
       fs.writeFileSync('public/version.json', JSON.stringify(versionData));
    }
  };
}
​
export default defineConfig({
  plugins: [
    process.env.NODE_ENV === 'production' && updateVersion() //生产环境执行
  ],
});

//vue.config.js
const fs = require('fs');
const path = require('path');
class VersionPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('VersionPlugin', () => {
       const versionData = { version: new Date().getTime() };
       fs.writeFileSync('public/version.json', JSON.stringify(versionData));
    });
  }
}
module.exports = {
  plugins: [
    process.env.NODE_ENV==='production' && new VersionPlugin()  //生产环境执行
  ]
};
​

3. 前端检测版本更新

在前端代码中，定期请求 version.json 文件，检查是否有新版本。如果版本号不一致，显示弹窗提示用户更新，用户可以选择立即更新或稍后更新。

// utils/version.js
import axios from "axios";
​
export async function isNewVersion() {
  const url = `//${window.location.host}/version.json`;
  try {
    const res = await axios.get(url, { headers: { 'Cache-Control': 'no-cache' } });
    const newVersion = res.data.version;
    const localVersion = window.localStorage.getItem('version');
​
    if (localVersion && localVersion !== newVersion) {
      alert('有新版本发布，请刷新页面！');
      window.localStorage.setItem('version', newVersion);
      window.location.reload();
    } else {
      window.localStorage.setItem('version', newVersion);
    }
  } catch (error) {
    console.log('获取线上版本号失败utils/version.js', error);
  }
}

4. 设置定时检查

为了确保用户始终使用最新版本，可以在路由跳转时或设置一个定时器定期检查版本号。

// main.js
import { isNewVersion } from './utils/version';
​
// 在路由跳转后执行版本检查
router.afterEach(() => {
  isNewVersion();
});
​
// 或者设置定时器每10分钟检查一次
setInterval(isNewVersion, 10 *60* 1000);

5. 处理缓存问题

为了避免从本地缓存中获取旧版本的 version.json 文件，可以在请求头中添加 Cache-Control: no-cache 字段。

axios.get(url, { headers: { 'Cache-Control': 'no-cache' } });

通过以上步骤，可以有效地实现前端版本控制，确保用户始终使用最新版本的页面内容和功能。这种方法简单、性能好，且不容易出错