废话不说直接上代码

大体思路：在项目下创建控制版本的Json文件，每次打包时候需要修改这个json，当页面路由发生跳转时请求json，跟localStorage里面的版本是否一致

1、src目录下创建libs目录，新增versionUpdate.js文件

import axios from 'axios'
import { Message } from 'element-ui'
const isNewVersion = () => {
    let url = `//${window.location.host}/static/version.json?t=${new Date().getTime()}`;
    axios.get(url).then(res => {
        if (res.status === 200) {
            let vueVersion = res.data.version;
            let localVueVersion = localStorage.getItem('vueVersion');
            if (localVueVersion && localVueVersion != vueVersion) {
                Message({
                    type: 'warning',
                    message: '发现新版本...',
                    center: true,
                    duration: 500,
                    onClose: () => {
                        localStorage.setItem('vueVersion', vueVersion);
                        window.location.reload();
                    }
                });
                return;
            } else {
                localStorage.setItem('vueVersion', vueVersion);
            }
        }
    });
}

export default {
    isNewVersion

2、static目录下新增update-version.js文件

const fs = require('fs');
const path = require('path');

const versionFile = path.resolve(__dirname, './version.json');

const data = JSON.parse(fs.readFileSync(versionFile));
data.version = Date.now().toString();
fs.writeFileSync(versionFile, JSON.stringify(data, null, 4));

3、static目录下新增version.json文件

{
    "version": "1683341780983"
}

4、vue.config.js配置文件修改

const CopyWebpackPlugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');

module.exports = { 
  // 配置版本控制
  configureWebpack: {
      plugins: [
          new CopyWebpackPlugin({
              patterns: [
                  {
                      from: path.resolve(__dirname, 'static/version.json'),
                      to: path.resolve(__dirname, 'dist/static/version.json'),
                      transform(content) {
                          const data = JSON.parse(content.toString());
                          data.version = Date.now().toString();
                          return JSON.stringify(data, null, 4);
                      }
                  }
              ]
          }),
          new WriteFilePlugin()
      ]
  }
}

5、修改打包命令(当运行打包命令时候，先执行update-version.js，再执行打包)

"build--test": "node ./static/update-version.js &&cross-env NODE_ENV=testing env_config=test node build/build.js",