spa 项目上线后程序刷新一次浏览器,来使用新上线资源

解决了什么问题?

spa项目新上线后,登陆有效期内用户,可以马上使用新上线资源。

原理:

路由切换时,判断如果是新上线,程序刷新下浏览器。

实现步骤:

  1. 打包时产生一个json文件:static/json/build_str.json
  2. localStorage中存入值:build_str
  3. 每个路由切换时,从接口获得新打包后json中的字符串,与localStorage中存的上次打包字符串比较,不相同时刷新

项目代码修改的地方:

  1. 相应目录下,新建文件:static/json/build_str.json
  2. build/build.js 修改:
// 将当前时间戳写入json文件
let json_obj = {"build_str": new Date().getTime().toString()}
fs.writeFile(path.resolve(__dirname, '../static/json/build_str.json'), JSON.stringify(json_obj), function (err) {
    if (err) {
        return console.error(err);
    }
    console.log("打包字符串写入文件:static/json/build_str.json,成功!");
    realBuild()
})
  1. src/main.js 修改:
router.beforeEach((to, from, next) => {
    axios.get('/static/json/build_str.json?v=' + new Date().getTime().toString())
        .then(res => {
            let newBuildStr = res.data.build_str
            let oldBuildStr = localStorage.getItem('build_str') || ''
            if (oldBuildStr !== newBuildStr) {
                console.log('auto refresh')
                localStorage.setItem('build_str', newBuildStr)
                location.reload()
            }
        })
    next()
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章