vue代码实现清除缓存
清除浏览器缓存的方法
在Vue项目中清除缓存通常涉及版本控制、强制刷新或服务端配置。以下是几种常见实现方式：
修改文件名添加哈希
通过webpack配置在打包时为静态文件添加哈希值，确保每次更新后文件名不同：
// vue.config.js
module.exports = {
filenameHashing: true,
chainWebpack: config => {
config.output.filename('[name].[hash].js')
config.output.chunkFilename('[name].[hash].js')
}
}设置HTTP缓存头
在服务器配置中禁用或缩短缓存时间：
# Nginx配置示例
location / {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}强制刷新当前页面
在Vue组件中实现手动刷新功能：
methods: {
clearCache() {
window.location.reload(true) // 强制从服务器重新加载
localStorage.clear()
sessionStorage.clear()
}
}使用版本控制参数
在API请求或资源引用中添加版本参数：
const version = new Date().getTime()
axios.get(`/api/data?v=${version}`)清除IndexedDB和缓存存储
对于PWA应用需要清除更广泛的存储：
if ('caches' in window) {
caches.keys().then(names => {
names.forEach(name => caches.delete(name))
})
}注意事项
- 生产环境建议使用哈希文件名而非完全禁用缓存
- 清除localStorage会同时移除所有本地存储数据
- 服务端配置需要根据实际使用的服务器类型调整
- 对于PWA应用可能还需要注销Service Worker
