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

20次阅读

共计 940 个字符,预计需要花费 3 分钟才能阅读完成。

解决了什么问题?
spa 项目新上线后,登陆有效期内用户,可以马上使用新上线资源。
原理:
路由切换时,判断如果是新上线,程序刷新下浏览器。
实现步骤:

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

vue 项目代码修改的地方:
1、相应目录下,新建文件:static/json/build_str.json2、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()
})
3、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()
})
项目 demo:https://github.com/cag2050/vu…

正文完
 0