提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue页面缓存问题_vue项目自动打开浏览器设置

Vue项目浏览器缓存自动 问题 设置 页面
2023-06-13 09:14:24 时间

目录

1.什么是浏览器缓存

2.浏览器缓存类型

3.浏览器缓存的优势与劣势

4. 浏览器缓存机制

5.如何清除浏览器缓存

在代码更新发布后，都会要求运营人员在访问网址时清除下本地缓存，防止万一掉坑 那问题就来了：每次清缓存很麻烦，怎样就不需要他们每次去手动清缓存呢？这就涉及到了浏览器缓存的问题

1.什么是浏览器缓存

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览

2.浏览器缓存类型

  • 缓存协商：Last-modified ，Etag
  • 彻底缓存（强制缓存）：cache-control，Expires

3.浏览器缓存的优势与劣势

优势：

  • 节约网络资源，提高网络效率
  • 降低服务器压力，减少服务器负担

缺点：

  • 缓存没有清理机制
  • 占用硬盘空间
  • 页面缓存，导致页面样式、图片或脚本等未能及时更新展示

4. 浏览器缓存机制

查阅这里：https://www.cnblogs.com/vajoy/p/5341664.html

还有这里：https://blog.csdn.net/u014590757/article/details/80140654

还有这里：https://www.jianshu.com/p/1a1536ab01f1

还有：https://www.cnblogs.com/kevingrace/p/10459429.html

5.如何清除浏览器缓存

修改根目录index.htm 让所有的css/js资源重新加载 

// index.html 
<head> 
    <meta http-equiv="pragram" content="no-cache"> 
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
</head>

配置 nginx 不缓存 html

vue默认配置，打包后css和js的名字后面都加了哈希值，不会有缓存问题。但是index.html在服务器端可能是有缓存的，需要在服务器配置不让缓存index.html 

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:不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)

  • 打包的文件路径添加时间戳

使用vue脚手架搭建的项目，打开vue.config.js

//vue.config.js
const version = new Date().getTime();
module.exports = {
    css: {
	    
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名   // css打包文件，添加时间戳
	      filename: `css/[name].${version}.css`,   
	      chunkFilename: `css/[name].${version}.css`
	    }
	 },

    configureWebpack: {
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        }
    }
}

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/180006.html原文链接：https://javaforall.cn

相关文章