纯前端解决--发版后导致浏览器页面缓存出现问题

问题背景
最近公司项目使用了后端返回路由，动态加载，所以代码中都是实用import来加载页面路由，这也导致了测试环境发布新版本后，页面缓存访问的还是原有的页面路径，所以页面会报错，如下：

试了很多种方法，如在.html页面的meta中添加cache-control；nginx中配置缓存策略；在文件打包中加上时间戳；。。。都没有很好的作用，最终选择前端本地版本号。
思路如下，在路由守卫beforEach处进行判断当前本地所存储版本号与服务器上文件版本号是否一致，如果不一致，则执行location.reload()，具体操作：

	1.在public/static中添加version.json文件

{
    "version": "1.0.1"
}

	2.在src中创建一个version文件夹，并创建versionUpdate.js文件

import axios from 'axios'
import {Message} from "@arco-design/web-vue";
const isNewVersion = () => {
    let url = `//${window.location.host}/static/version.json?t=${new Date().getTime()}`;
    axios.get(url).then(res => {
        if (res.status === 200) {
            console.log(res.data.version, 'version')
            let version = res.data.version,
                localVueVersion = localStorage.getItem('version');
            if (localVueVersion && localVueVersion != version) {
                localStorage.setItem('version', version);
                Message.info('获取有新版本，即将刷新页面获取最新版本')
                window.location.reload();
                return;
            } else {
                localStorage.setItem('version', version);
            }
        }
    });
}

export default {
    isNewVersion
}

3.在全局路由拦截中，只要每次版本号不同就重新加载页面清除浏览器缓存

router.beforeEach(async (to, from, next) => {
  versionTood.isNewVersion()
  // 其他逻辑
})

本身自己有这样一个思路，但是就是想不起来如何接口化获取本地文件数据，感谢大佬@我总是词不达意

--------------------------------------------------------------------------追 更 一 下---------------------------------------------------------------------------------
本来大佬是实现了在打包中实现版本号自增的，但是按照大佬的写法打包出现问题，因为着急上线所以选择手动更改，今天有时间又来琢磨了一下。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "node ./src/addVersion.js && vue-cli-service build",
    "test": "node ./src/addVersion.js && vue-cli-service build --mode test",
},

原本是在package.json中先执行addVersion.js脚本，但是在我的项目中不适用，后来发现可以在vite.config.ts中进行配置

addVersion.js文件：

const fs = require('fs');

//返回version的json数据
async function getVersionJson() {
    let data = fs.readFileSync('./public/static/version.json') //fs读取文件
    return JSON.parse(data) //转换为json对象
}

export default async function addVersion() {
    let versionData = await getVersionJson() //获取version的json
    let arr = versionData.version.split('.') //切割后的版本号数组
    arr[2] = parseInt(arr[2]) + 1
    versionData.version = arr.join('.') //转换为以"."分割的字符串
    //用versionData覆盖version.json内容
    try {
        // 将数据转换为 JSON 字符串并写入文件
        fs.writeFileSync('./public/static/version.json', JSON.stringify(versionData, null, '\t'));
        console.log('version has been successfully updated.');
    } catch (err) {
        console.error('Error writing to version:', err);
    }
}

vite.config.ts文件：

import addVersion from './src/version/addVersion'
export default defineConfig({command, mode}) => {
	return {
		plugins: [addVersion()]
	}
}

这样就不用每次手动改版本号啦！