创建versionUpdatePlugin文件
javascript
// versionUpdatePlugin.js
const writeVersion = async (versionFile, content) => {
const fs = await import('fs').then((module) => module.default);
// 写入文件
fs.writeFile(versionFile, content, (err) => {
if (err) throw err
})
}
export default (options) => {
let config
return {
name: 'version-update',
configResolved(resolvedConfig) {
// 存储最终解析的配置
config = resolvedConfig
},
async buildStart() {
const fs = await import('fs').then((module) => module.default);
const path = await import('path').then((module) => module.default)
// 生成版本信息文件路径
const file = config.publicDir + path.sep + 'version.json'
// 这里使用编译时间作为版本信息
const content = JSON.stringify({ version: options.version })
if (fs.existsSync(config.publicDir)) {
writeVersion(file, content)
} else {
fs.mkdir(config.publicDir, (err) => {
if (err) throw err
writeVersion(file, content)
})
}
},
}
}
修改vite.config.js文件
css
1. const now = new Date().getTime(); // 定义一个时间戳
2. plugins: [
versionUpdatePlugin({
version: now
})
],
plugins中引入versionUpdatePlugin方法
3. 定义全局变量
define: {
__APP_VERSION__: now,
}
使用
javascript
// 添加 beforeEach 导航守卫
router.beforeEach(async (to, from, next) => {
await versionCheck() // 版本监控
next()
});
// 版本监控
const versionCheck = async () => {
if (process.env.NODE_ENV === 'development') return
const response = await axios.get('version.json')
if (__APP_VERSION__ !== response.data.version) {
// console.log('有新版本,刷新页面');
setTimeout(() => {
window.location.reload()
}, 500)
}
}