前言：
解决方案的版本号生成参考了网上的文章，因为时间很久了具体是那篇我也忘记了就不上原文链接了，写这篇文章是为了做一个记录方便日后查看。
问题描述：
vue3 打包会将js和css打包成带随机数的文件名，项目部署后，用户在浏览过程中，再次对项目进行了打包发布后，浏览器没有缓存的页面报错提示找不到js,需要用户手动刷新才能正确加载页面。
报错页面截图
解决方案：
每次发布的时候记录一个版本号，在跳转路由的时候进行版本判断，如果发现两次版本不一致提示版本更新或者是自动刷新一次浏览器。我项目中是采用的自动刷新浏览器。
我项目使用的是vue3、element-plus、typesScript4、vite3的后台集成方案（vue-element-plus-admin）
第一步：生成版本号
1.在项目中新建一个build文件夹，新增build-pro.js 和 build-test.js两个生成版本号的js文件(build-pro.js:是正式发布版本，build-test.js：是测试版本)，两个js基本是一样的就生成的文件夹名称不同： const OUTPUT_DIR = 'dist-pro'，build-test.js中将dis-pro换成dist-test即可。根据项目需求调整，如果项目都打包到dist文件中，新建一个版本号js文件即可。
build-test.js
console.log('build > 文件开始执行！')
const fs = require('fs')
const path = require('path')
function getRootPath(...dir) {
return path.resolve(process.cwd(), ...dir)
}
const runBuild = async () => {
try {
const OUTPUT_DIR = 'dist-pro'
const VERSION = 'version.json'
const versionJson = {
version: 'V_' + Math.floor(Math.random() * 10000) + Date.now()
}
fs.writeFileSync(getRootPath(`${OUTPUT_DIR}/${VERSION}`), JSON.stringify(versionJson))
console.log(`version file is build successfully!`)
} catch (error) {
console.error('version build error:\n' + error)
process.exit(1)
}
}
runBuild()
console.log('build > 文件执行结束！')
第二步：在package.json中配置生成版本号的命令
package.json
每次打包后会成一个version.json文件
version.json
第三步：修改.env.pro和.env.test文件，新增语句来控制是否强制刷新。这一步不需要的话可以省略
VITE_REFRESH=true
是否强制刷新
第四步：在permission.ts中将版本号写入到sessionStorage中，每次跳转路由的时候对比版本号，版本号不一致直接刷新浏览器。
permission.ts
const checkVersion = async () => {
const url = `/version.json?t=${Date.now()}`
let res = null
try {
res = await axios.get(url)
} catch (err) {
console.error('checkVersion error: ', err)
}
let version = null
if (res) {
version = res.data.version
}
const localVersion = wsCache.get('sq_version')
if (version && localVersion !== version) {
wsCache.set('sq_version', version)
window.location.reload()
}
wsCache.set('sq_version', version)
}
网友评论