解决部署vue应用后,需手动刷新才能看到修改后的结果

浏览器中打开页面之后,发布了新的内容,需要手动F5刷新才能看到内容,然后客户不想重新关了再打开页面,又不想手动刷新;

看到https://blog.csdn.net/qq_35713752/article/details/102921315这篇文章之后有的想法,用原文的方法,我这
儿好像没解决

步骤:

  1. 在/static文件夹下新建一个json文件,写上你需要的版本号
{
    "version": "1.3"
}
  1. 在App.vue请求刚刚写的json,和localStorage的version比较
    methods:{
        checkVersion () {
            axios.get(`http://xxx.xxx.xxxxx/static/version.json`,{headers: {'Cache-Control': 'no-cache'}}) // 反正就是要请求到json文件的内容, 并且禁止缓存
                .then(res => {
                const version = res.data.version
                const clientVersion = localStorage.getItem('_version_')

                console.log('最新版本>>', version)
                console.log('当前版本>>', clientVersion)

                // 和最新版本不同,刷新页面
                if (version !== clientVersion) {
                    localStorage.setItem('_version_', version)
                    window.location.reload()
                }
                })
            }
    }

  1. 还是App.vue中,created里面调用
    created(){
        setInterval(()=>{
            this.checkVersion()
        }, 60000) // 我这儿1分钟一次
    }
  • 4
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值