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

问题背景

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

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

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