建设银行网站入口,网页设计培训 周末双休,腾讯短网址在线生成,评价一个网站问题背景
前端项目部署更新后#xff0c;通知业务验证#xff0c;业务点击收藏的标签#xff0c;打开网页后没有看到修改的内容#xff0c;每次都需要手动刷新#xff0c;用户体验非常不好。
问题原因#xff1a;缓存未过期#xff0c;浏览器直接读取本地缓存#xf…问题背景
前端项目部署更新后通知业务验证业务点击收藏的标签打开网页后没有看到修改的内容每次都需要手动刷新用户体验非常不好。
问题原因缓存未过期浏览器直接读取本地缓存而未从服务器请求新的资源如下所示。 请求方法: GET 状态代码: 200 OK (来自磁盘缓存) 解决方法
在 build 目录下创建 generate.js目的是每次打包时在 public 目录下生成 app-version.json 文件
// /build/version/generate.jsconst 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 axiosasync 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()
