vue 部署上线清除浏览器缓存「建议收藏」

vue 部署上线清除浏览器缓存「建议收藏」vue项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存。这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案:一、修改根目录index.html在head里面添加下面代码<metahttp-equiv=”pragram”content=”no-cache”><metahttp-equiv=”cache-control”content=”no-cache,no-store,must-revalidate”>

大家好,又见面了,我是你们的朋友全栈君。

vue 项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存。这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案:

一、修改根目录index.html

在 head 里面添加下面代码

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

这种会让所有的css/js资源重新加载

二、配置 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浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200
no-store浏览器不缓存,刷新页面需要重新下载页面

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

1、在 vue-cli2.x 创建的项目里,找到 build/webpack.prod.conf.js 文件

//定义一个变量获取当前时间戳
const version = new Date().getTime();
//output模块将时间戳加入到输出的文件名里
output: { 
   
  publicPath: '/',
  path: config.build.assetsRoot,
  filename: utils.assetsPath(`js/[name].[chunkhash].${ 
   version}.js`),
  chunkFilename: utils.assetsPath(`js/[id].[chunkhash].${ 
   version}.js`)
},

//css文件名加时间戳
new ExtractTextPlugin({ 
   
    filename: utils.assetsPath(`css/[name].[contenthash].${ 
   version}.css`),
    allChunks: true,
}),

2、在 vue-cli3.x 创建的项目里,打开 vue.config.js 文件 ( 没有该文件自己在 src 同级目录下创建一个 )

const version = new Date().getTime();
module.exports = { 
   
  	outputDir: 'dist', //打包的时候生成的一个文件名
	lintOnSave: false,
  	productionSourceMap: false,
  	css: { 
   
	    loaderOptions: { 
   
	      sass: { 
   
	        data: `@import "@/components/themes/_handle.scss";`
	      }
	    },
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: { 
   
	      // 修改打包后css文件名 // css打包文件,添加时间戳
	      filename: `css/[name].${ 
   version}.css`,   
	      chunkFilename: `css/[name].${ 
   version}.css`
	    }
	 },
  	configureWebpack: { 
   
		output: { 
    // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
		     filename: `js/[name].[chunkhash].${ 
   version}.js`,
		     chunkFilename: `js/[id].[chunkhash].${ 
   version}.js`
		}
	}
}

效果:
在这里插入图片描述

如有异议,欢迎留言讨论!!!

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161123.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • zabbix 监控多个mysql_zabbix 监控多实例mysql[通俗易懂]

    zabbix 监控多个mysql_zabbix 监控多实例mysql[通俗易懂]zabbix监控多实例mysql一台服务器上开启了3个mysql实例进程,占用不同的端口3306、3307、3308原理说明:通过自动发现规则来获取MySQL实例的端口,自动发现规则上的{$MYSQLPORT}是要传递给agent自动发现脚本的参数,这个值是从主机定义的宏{$MYSQLPORT}获取过来的,自动发现的脚本将其解析成{#MYSQLPORT}:端口的形式,监控项原型再根据{#MYS…

  • 医学图像处理(医学图像处理研究生就业选择)

    1.医学影像学医学影像学MedicalImaging,是研究借助于某种介质(如X射线、电磁场、超声波等)与人体相互作用,把人体内部组织器官结构、密度以影像方式表现出来,供诊断医师根据影像提供的信息进行判断,从而对人体健康状况进行评价的一门科学,包括医学成像系统和医学图像处理两方面相对独立的研究方向。仪器主要包括X光成像仪器、CT(普…

  • SQL语句多表连接查询语法

    SQL语句多表连接查询语法总结:内连接就是两个表的交集,左外连接就是左边表加两表交集,右外连接就是右边表加两表交集一、外连接1.左连接leftjoin或leftouterjoinSQL语句:select*fromstudentleftjoinscoreonstudent.Num=score.Stu_id;2.右连接rightjoin或r…

  • sqlserver 属性 TextHeader 不可用于 StoredProcedure“[dbo].[x]”该对象可能没有此属性,也可能是访问权限不足而无法检索。 该文本已加密。

    sqlserver 属性 TextHeader 不可用于 StoredProcedure“[dbo].[x]”该对象可能没有此属性,也可能是访问权限不足而无法检索。 该文本已加密。打开sqlserverproc存储过程错误:属性TextHeader不可用于StoredProcedure“[dbo].[x]”。该对象可能没有此属性,也可能是访问权限不足而无法检索。 该文本已加密。(Microsoft.SqlServer.Smo),提示如下图错误:注:本文基于SQLserver2008R2,其他版本没有测试过解决方法:1、使用原有数据库从新导出非加密脚本重新建立…

  • html圣杯布局,三种实现圣杯布局方法「建议收藏」

    html圣杯布局,三种实现圣杯布局方法「建议收藏」本文介绍三种实现圣杯布局的方法,前两种可归为一类,与第三种方法差别在于加载顺序不同。圣杯布局实现1:步骤1:给出HTML结构:圣杯布局1*{margin:0;padding:0;text-Align:center;}#top{background:#666;height:60px;}#left{background:#E79F6D;}#content{background:…

  • tomcat无法启动程序 Error filterStart

    tomcat无法启动程序 Error filterStart有时在启动tomcat时,有的应该程序无法启动,tomcat报错信息如下:org.apache.catalina.core.StandardContextstartSEVERE:ErrorfilterStartorg.apache.catalina.core.StandardContextstartSEVERE:Contextstartupfaileddueto…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号