前端项目部署后，需要刷新页面才能看到更新内容

问题背景

前端项目部署更新后，通知业务验证，业务点击收藏的标签，打开网页后没有看到修改的内容，每次都需要手动刷新，用户体验非常不好。

问题原因：缓存未过期，浏览器直接读取本地缓存，而未从服务器请求新的资源，如下所示。

请求方法: 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 '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()