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`,
        }
    },  
目录
相关文章
|
6月前
|
存储 缓存
第21节: Vue3 计算缓存与方法
第21节: Vue3 计算缓存与方法
88 0
|
11月前
|
缓存 JavaScript C++
【Vue】—计算属性缓存VS方法以及侦听器的区别
【Vue】—计算属性缓存VS方法以及侦听器的区别
|
6月前
|
缓存 JavaScript
vue使用localStorage缓存数据
vue使用localStorage缓存数据
|
6月前
|
存储 缓存 NoSQL
把ruoyi-vue前后端分离项目的redis缓存改为本地缓存cache
把ruoyi-vue前后端分离项目的redis缓存改为本地缓存cache
679 0
|
1月前
|
缓存 JavaScript 搜索推荐
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
113 1
|
2月前
|
缓存 JavaScript
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
539 1
|
3月前
|
缓存 JavaScript
Vue学习之--------编程式路由导航、缓存路由组件、新的钩子函数(4)(2022/9/5)
这篇文章介绍了Vue中编程式路由导航的方法,包括使用`$router.push`、`$router.replace`、`$router.forward`、`$router.back`和`$router.go`进行路由跳转和历史记录操作,以及如何利用`<keep-alive>`组件缓存路由组件,和Vue Router新增的两个生命周期钩子`activated`和`deactivated`的用法及其在项目中的应用和测试结果。
Vue学习之--------编程式路由导航、缓存路由组件、新的钩子函数(4)(2022/9/5)
|
4月前
|
缓存 JavaScript
vue 页面缓存 keep-alive(含配置清除页面缓存 exclude,局部缓存,动态缓存,路由控制缓存 $route.meta.keepAlive)
vue 页面缓存 keep-alive(含配置清除页面缓存 exclude,局部缓存,动态缓存,路由控制缓存 $route.meta.keepAlive)
542 0
|
6月前
|
缓存 JavaScript 前端开发
Vue 3的事件监听缓存如何优化性能?
【5月更文挑战第31天】Vue 3的事件监听缓存如何优化性能?
310 1
|
5月前
|
存储 缓存 JavaScript
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析,超详细!
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析,超详细!
下一篇
无影云桌面