vue2.x解决浏览器缓存问题

简介: vue2.x解决浏览器缓存问题

问题描述


当程序版本升级时,用户因为缓存访问的还是老的页面,不会自动更新修改的的文件


解决方案


两种解决方案均可


  1. nginx
server {
    listen 80;
    server_name yourdomain.com;
    location / {
        try_files $uri $uri/ /index.html;
        root /yourdir/;
        index index.html index.htm;
        if ($request_filename ~* .*\.(?:htm|html)$)
        {
            add_header Cache-Control "no-cache, no-store";  //对html文件设置永远不缓存
        }      
      }
}
  • no-cache
    数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age(最大缓存期), 则缓存期间不访问服务器
  • no-store
    不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)
  1. vue.config.js
let timeStamp = new Date().getTime();
configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.filename = `js/[name].${timeStamp}.js`
            config.output.chunkFilename = `js/[name].${timeStamp}.js`
         }
    },
css: {
        extract: { 
            ignoreOrder: true,
            filename: `css/[name].${timeStamp}.css`,
            chunkFilename: `css/[name].${timeStamp}.css`,
        }
    },  
目录
相关文章
|
1月前
|
存储 缓存
第21节: Vue3 计算缓存与方法
第21节: Vue3 计算缓存与方法
46 0
|
6月前
|
缓存 JavaScript C++
【Vue】—计算属性缓存VS方法以及侦听器的区别
【Vue】—计算属性缓存VS方法以及侦听器的区别
|
1月前
|
缓存 JavaScript
vue使用localStorage缓存数据
vue使用localStorage缓存数据
|
1月前
|
存储 缓存 NoSQL
把ruoyi-vue前后端分离项目的redis缓存改为本地缓存cache
把ruoyi-vue前后端分离项目的redis缓存改为本地缓存cache
290 0
|
9天前
|
存储 缓存 JavaScript
vue的缓存组件 | 详解KeepAlive
vue的缓存组件 | 详解KeepAlive
23 6
|
3天前
|
存储 缓存 JavaScript
uni-app,vue,react,Trao之缓存类封装
uni-app,vue,react,Trao之缓存类封装
|
5天前
|
存储 缓存 JavaScript
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析,超详细!
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析,超详细!
|
30天前
|
缓存 JavaScript 前端开发
Vue 3的事件监听缓存如何优化性能?
【5月更文挑战第31天】Vue 3的事件监听缓存如何优化性能?
35 1
|
1月前
|
存储 缓存 JavaScript
vue中缓存页面数据(刷新不丢失)
vue中缓存页面数据(刷新不丢失)
|
7月前
|
缓存 JavaScript
vue中页面缓存keep-alive控制缓存清除
vue中页面缓存keep-alive控制缓存清除