每次前端部署到服务器上都需要清除缓存,这样才能保证页面是最新的,不知道是什么原因
思路
前端重新部署后如何让用户刷新页面? 上的有个思路不错
哈哈哈,好巧,这是我面试题库里的题之一,我的方案是路由守卫里加实现,做法也很简单,/version.json 是发布时候的一个时间戳 - {202205234345564},beforeRoute 里有动作就请求 /version.json?{random},和当前程序里的 version 不一致就提示 并自动刷新
实现
ws 和轮训都不太行,开销太大。
插件源码 SetScriptTimestampPlugin.js
// SetScriptTimestampPlugin.js
const packageJson = require('./package.json')
const fs = require('fs')
class SetScriptTimestampPlugin {
apply (compiler) {
compiler.hooks.compilation.tap('SetScriptTimestampPlugin',
(compilation, callback) => {
console.log('SetScriptTimestampPlugin!')
console.log('packageJson', packageJson)
const version = {}
version.version = packageJson.version
version.buildTime = new Date().getTime()
const data = JSON.stringify(packageJson, null, 2)
fs.writeFileSync('public/version.json', data)
})
}
}
module.exports = SetScriptTimestampPlugin
配置 webpack
const SetScriptTimestampPlugin = require('./SetScriptTimestampPlugin.js')
plugins: [
new SetScriptTimestampPlugin()
]
然后每次修改代码了都会更新 version.json,这样就可以让用户刷新页面了,具体还是需要在项目代码中实现。