前端项目（vue）发布新版本后，弹窗提醒用户升级

最终效果

 但是要怎么能监测到有新版本发布呢？

1、使用Websocket或SSE与后台建立长连接，有新版本发布时，后台发送消息通知前端。
2、前端打包时，动态创建一个version.json，保存当前版本号；通过接口调用生成的json，对比新旧版本号，此方法不需要后台配合。

这里选择的是第二种，话不多说，直接上代码。

第一步：

项目根目录下新建一个resetVersion.js文件，生成版本号json文件。

const path = require('path');
const fsExtra = require('fs-extra');

const runBuild = async () => {
  try {
    const OUTPUT_DIR = 'public'; // 输出目录（相对当前文件位置）
    const FILENAME = 'version.json'; // 文件名
    const versionJson = { // 文件内容
      version: 'V' + new Date().getTime(),
    };
    fsExtra.outputJson(path.resolve(__dirname, `${OUTPUT_DIR}/${FILENAME}`), versionJson, (err) => {
      if (err) {
        console.error('Failed to write version.json:', err);
      } else {
        console.log('version.json has been successfully generated.');
      }
    })
  } catch (error) {
    process.exit(1);
  }
};

runBuild();

第二步：

修改package.json中build命令，执行npm run build。

你会发现在public目录下多了一个version.json，并且会被一起打包进dist文件。

// 我的resetVersion.js文件是放在根目录下面的，可根据实际情况自行调整。
"scripts": {
   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
   "start": "npm run dev",
   "build": "node resetVersion.js && node build/build.js"
},

第三步：

切换页面路由时，请求version.json文件，若有新版本强制刷新浏览器。

import axios from 'axios';

router.afterEach(async (to) => {
  const url = '/version.json?v=' + new Date().getTime();
  const response = await axios.get(url);
  const serverVersion = response.data ? response.data.version : null; 
  const localVersion = localStorage.getItem('vmp_version');
  // 新旧版本号对比
  if (serverVersion && serverVersion !== localVersion) {
    localStorage.setItem('vmp_version', serverVersion);
    // 此处自定义弹窗提示
    // window.location.reload();
  } else {
    localStorage.setItem('vmp_version', serverVersion);
  }
});

如果你并不希望在本地看到version.json，仅在打包后生成版本号文件，调整如下：

OUTPUT_DIR = 'dist'
"build": "node build/build.js && node resetVersion.js "

 第三步仅在生产环境运行。

好了，到这里就结束啦。