前端代码上传服务器,用户要手动刷新才能显示新的代码

参考 :https://blog.csdn.net/qq_39352780/article/details/118154096?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-118154096-blog-93893787.pc_relevant_sortByAnswer&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-118154096-blog-93893787.pc_relevant_sortByAnswer&utm_relevant_index=1

1.在我们的前端静态public文件夹下创建一个保存我们版本号的文件,我的名字是version.json

{
    "version": "1.0.6"
}

2.将静态资源的index.html文件添加meta标签,让他不进行缓存

 <meta http-equiv="pragram" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

3.封装一个方法进行本地版本号和线上版本号进行对比,如果是初次,则保存我们线上的版本号,然后刷新页面,如果已经存在,则进行对比,相同不刷新,不相同就刷新,再次保存新的版本号,要注意的就是取的那个静态资源的地址

import axios from 'axios'
import httpUrl from '@/request/http/url'
const isNewVersion = () => {
    let url = httpUrl.upLoadUrl + `/version.json?t=${new Date().getTime()}`;
    localStorage.setItem('vueVersionUrl', url)
    axios.get(url).then(res => {
        if (res.status === 200) {
            let vueVersion = res.data.version;
            let localVueVersion = localStorage.getItem('vueVersion');
            if (!!localVueVersion) {
                if (localVueVersion != vueVersion) {
                    localStorage.setItem('vueVersion', vueVersion);
                    window.location.reload();
                    return
                }
            } else {
                localStorage.setItem('vueVersion', vueVersion);
                window.location.reload();
                return
            }

        }
    })
}

export default {
    isNewVersion
}

4.一般情况下,用户使用就会进行路由跳转,所以这个函数,我就放在了路由拦截上使用

   首先引入

import versionTood from '@/libs/versionUpdate'

然后使用

router.beforeEach((to, from, next) => {
    versionTood.isNewVersion()
})

注意:这种方法在用户进行路由跳转的时候才会生效,也就是不跳转是不生效的.总的来说就是很乱,原文很清晰,这个方法有一个弊端,就是前提是你上一个版本里面的代码需要有这些,如果没有,可能这个方法触发不了,如果各位解决了,可以分享一下

备注:这只是一个记录,参考了是很多人的,如果跟您的有相同的,可以告诉我,我加跳转链接,毕竟,找个东西要找很多人的,忘记都参考了哪位大神的了