需求:当我们的项目打包重新部署后,让用户在访问系统时,能够自动刷新,而不是需要用户手动刷新
思路:项目打包完成后,生成版本号(version.json),在用户进行路由的跳转时,对比当前版本号和localStorage存储的版本号,若不同,则将当前版本号存入localStorage,并强制页面刷新
实现步骤:
1.创建build-pro.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'
const VERSION = 'version.json'
const versionJson = {
version: 'V_' + Math.floor(Math.random() * 10000) + Date.now()
}
fs.writeFileSync(getRootPath(`${OUTPUT_DIR}/js/${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 > 文件执行结束!')
2.在package.json文件中,修改打包命令
3.在前置路由守卫中进行判断
async function checkAppNewVersion() {
const url = `/js/version.json?t=${Date.now()}`
let res = null
try {
res = await axios.get(url)
} catch (err) {
console.error('checkAppNewVersion error: ', err)
}
if (!res) return
const version = res.data.version
console.log(url)
if (version && version !== localStorage.getItem('version')) {
localStorage.setItem('version', version)
console.log('更新')
window.location.reload()
} else {
console.log('不更新')
}
}
router.beforeEach(async(to, from, next) => {
// 除了跳转到'/'之外,都进行版本号对比
if (from.path !== '/') {
checkAppNewVersion()
}
}
打包成功后的效果: