解決了什麼問題?
spa項目新上線後,登陸有效期內用戶,可以馬上使用新上線資源。
原理:
路由切換時,判斷如果是新上線,程序刷新下瀏覽器。
實現步驟:
- 打包時產生一個json文件:static/json/build_str.json
- localStorage中存入值:build_str
- 每個路由切換時,從接口獲得新打包後json中的字符串,與localStorage中存的上次打包字符串比較,不相同時刷新
項目代碼修改的地方:
- 相應目錄下,新建文件:static/json/build_str.json
- 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()
})
- 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()
})