问题背景
前端项目部署更新后,通知业务验证,业务点击收藏的标签,打开网页后没有看到修改的内容,每次都需要手动刷新,用户体验非常不好。
问题原因:缓存未过期,浏览器直接读取本地缓存,而未从服务器请求新的资源,如下所示。
请求方法: GET
状态代码: 200 OK (来自磁盘缓存)
解决方法
在 build 目录下创建 generate.js,目的是每次打包时在 public 目录下生成 app-version.json 文件
// /build/version/generate.js
const fs = require('fs')
const path = require('path')
module.exports = function generateAppVersion(appVersion) {
try {
let obj = {
appVersion: String(appVersion)
}
fs.writeFileSync(path.resolve('public/app-version.json'),
JSON.stringify(obj))
} catch (error) {
console.error(error)
}
}
在 vue.config.js 中调用 version.js
const generateAppVersion = require('./build/version/generate.js')
const timestamp = Date.now()
generateAppVersion(timestamp)
执行 npm run build,可以看到 public 中多了 app-version.json 文件
{"appVersion":"1698742226172"}
src 文件下创建 version.js,在 main.js 中 import 引入,进行新旧版对比并刷新浏览器。
import axios from 'axios'
async function compare() {
let last = window.localStorage.getItem('app_version') // 旧版本
let current = await queryVersion() // 新版本
if(!last) {
setVersion(current)
}
if(last && last != current) { // 新旧版本不一样
setVersion(current)
window.location.reload() // 自动刷新浏览器
}
}
function setVersion(version) {
window.localStorage.setItem('app_version', version)
}
/**
* 请求新版本
* @returns
*/
async function queryVersion() {
return axios.get(window.location.origin + window.location.pathname + './app-version.json?r=' + Math.random())
.then(({data}) => {
return data.appVersion
})
}
compare()