每次项目更新小功能时，都需要提醒用户手动刷新界面才能生效。为了简化这一流程，我们考虑实现自动更新功能。

1、创建记录版本号的文件

在 public/appVersion.json 中存储版本号，每次打包时可以自动更新。

{"version":“1.0.0”} 

2、创建版本号更新的脚本

在src/utils/updateVersion.js 中创建脚本，利用打包时间作为版本号

const fs = require('fs');
const { version } = require('process');
const path ="./public/appVersion.json";
const jsonFile=JSON.parse(fs.readFileSync(path,'utf-8'));
const oldVesrson = jsonFile.version;
const newVersion =new Date().getTime();
const newJsonFile = {version:newVersion};
try{
 fs.writeFileSync(path,JSON.stringify(newJsonFile),'utf-8');
 console.log(`版本更新成功：从${oldVesrson}更新到${newVersion}`);
}catch(err){
 console.error('版本更新失败',err);
}

3、在App.vue中监听版本号，判断是否需要更新

监听路由的变化，每次路由发生变化会请求appVersion.json来获取版本号，通过与缓存里面记录的版本号的比较来自动刷新界面。

难点：如何区分老用户与新用户
解决方案：由于早期版本未记录版本号，但项目已运行一段时间，需确保老用户能自动更新。因此，可通过检查项目历史缓存数据作为判断依据。

    watch(() => route.fullPath, () => {
      const oldVersion = localStorage.getItem('appVersion')
      axios.get('/appVersion.json').then((res) => {
        const newVersion = res.data.version
        console.log('获取到版本号', oldVersion, newVersion)
        if (oldVersion) {
          if (parseInt(newVersion) !== parseInt(oldVersion)) {
            localStorage.setItem('appVersion', newVersion)
            window.location.reload()
          }
        }
        else {
          if (localStorage.getItem("XXX")) {
            window.location.reload()
          }
        }
      })
    })

4、修改打包命令

在package.json中修改打包命令，增加“node ./src/utils/updateVersion.js”

scripts：{
	 "build": "node ./src/utils/updateVersion.js && vue-cli-service build --mode prod",
}

缺点：

1、localStorage 被清空（退出登录或隐私模式）