Vue/cli2 || /cli3部署上线清理浏览器缓存

本文主要是介绍Vue/cli2 || /cli3部署上线清理浏览器缓存,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题描述:项目(vue /cli2 || vue /cli3) 部署上线用浏览器打开后依旧是上一个版本

问题原因:浏览器的缓存机制(分为强缓存和协商缓存)
强缓存:不在客户端存储资源,始终去原始服务器获取资源
协商缓存:向后端发起请求,看服务器资源是否更新,如果没有更新就返回304,如果更新了就返回200
no-cacheno-store 都是 HTTP 协议头 Cache-Control 的值。区别是:
no-store
彻底禁用缓存,所有内容都不会被缓存到缓存或临时文件中。
no-cache
可以在客户端存储资源,每次都必须去服务端做新鲜度校验,来决定从服务端获取新的资源(200)还是使用客户端缓存(304)。也就是所谓的协商缓存
除了 no-cacheno-storeCache-Control 头的取值还有:
public
所有内容都将被缓存(客户端和代理服务器都可缓存)
private
内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存)
max-age=xxx
缓存的内容将在 xxx 秒后失效,这个选项只在 HTTP1.1 可用,并如果和 Last-Modified 一起使用时,优先级较高。

一、修改根目录index.html,添加以下代码

于 HEAD 标签内直接添加 META 标签:
1.)本人所在项目采用得这个

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

2.)如果不想彻底禁止缓存可以采用下面的

<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />

二、nginx设置不缓存 html

(nginx设置后,每次刷新页面加载时间太长,所以我所在项目未使用)
1.)在nginx.conf文件做设置:增加add_header Cache-Control "no-cache, no-store

location = /index.html {root	 /usr/webkit/dist;add_header Cache-Control "no-cache, no-store";
}

2.)或者直接在 location / 这里增加add_header Cache-Control "no-cache, no-store

server {location / {root   /usr/webkit/dist;index  index.html index.htm;add_header Cache-Control "no-cache, no-store";}
}

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

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

//获取当前时间戳
const version = new Date().getTime();
//将时间戳加入output中
output: {...config.output,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 文件

const version = new Date().getTime();
module.exports = {configureWebpack: {output: { filename: `js/[name].[chunkhash].${version}.js`,chunkFilename: `js/[id].[chunkhash].${version}.js`}}
}

或者

const version = new Date().getTime();
module.exports = {configureWebpack: config =>{	if(process.env.NODE_ENV === "production"){Object.assign(config,{output: { ...config.output,filename: `static/js/[name].[chunkhash].${version}.js`,chunkFilename: `static/js/[name].[chunkhash].${version}.js`}})}}
}

四、location.reload() 重新加载当前文档

(这是同事提供的方法,本人未使用,但是有采取性)
  如果index.html 设置了不允许缓存,每次刷新时,就会重新加载资源,可能会造成响应过慢的现象。所以引入了一种新的方案:
  1.)在package.json文件每次打包时改变一下version;
  2.)在main.js文件中,加入如下代码:

const VUE_VERSION = require('../package.json').version
const V_VER = window.localStorage.getItem("vueVersion");
if(VUE_VERSION != V_VER){localStorage.clear()window.localStorage.setItem("vueVersion", VUE_VERSION );location.reload()
}

五、HTML中的Meta标签
根据HTML语言标准注释:meta标签是对网站发展非常重要的标签,它可以用于鉴别作者,设定页面格式,标注内容提要和关键字,以及刷新页面等等。

HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。

1.expires(期限)
说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。
用法:

`<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">`

注意:必须使用GMT的时间格式。

2.Pragma(cach模式)
说明:禁止浏览器从本地机的缓存中调阅页面内容。
用法:

`<META HTTP-EQUIV="Pragma" CONTENT="no-cache">` 

注意:这样设定,访问者将无法脱机浏览。

3.Refresh(刷新)
说明:需要定时让网页自动链接到其它网页的话,就用这句了。
用法:

`<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.baidu.com">`

注意:其中CONTENT="5;URL=http://www.baidu.com"的5是指停留5秒钟后自动刷新到URL网址。

下面标签作用是20秒自动刷新当前页面:

<meta http-equiv="refresh" content="20" />

4.Set-Cookie(cookie设定)
说明:如果网页过期,那么存盘的cookie将被删除。
用法:

<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;
expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/"> 

注意:必须使用GMT的时间格式。

这篇关于Vue/cli2 || /cli3部署上线清理浏览器缓存的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/606970

相关文章

centos7基于keepalived+nginx部署k8s1.26.0高可用集群

《centos7基于keepalived+nginx部署k8s1.26.0高可用集群》Kubernetes是一个开源的容器编排平台,用于自动化地部署、扩展和管理容器化应用程序,在生产环境中,为了确保集... 目录一、初始化(所有节点都执行)二、安装containerd(所有节点都执行)三、安装docker-

在Ubuntu上部署SpringBoot应用的操作步骤

《在Ubuntu上部署SpringBoot应用的操作步骤》随着云计算和容器化技术的普及,Linux服务器已成为部署Web应用程序的主流平台之一,Java作为一种跨平台的编程语言,具有广泛的应用场景,本... 目录一、部署准备二、安装 Java 环境1. 安装 JDK2. 验证 Java 安装三、安装 mys

Redis与缓存解读

《Redis与缓存解读》文章介绍了Redis作为缓存层的优势和缺点,并分析了六种缓存更新策略,包括超时剔除、先删缓存再更新数据库、旁路缓存、先更新数据库再删缓存、先更新数据库再更新缓存、读写穿透和异步... 目录缓存缓存优缺点缓存更新策略超时剔除先删缓存再更新数据库旁路缓存(先更新数据库,再删缓存)先更新数

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

SpringBoot使用注解集成Redis缓存的示例代码

《SpringBoot使用注解集成Redis缓存的示例代码》:本文主要介绍在SpringBoot中使用注解集成Redis缓存的步骤,包括添加依赖、创建相关配置类、需要缓存数据的类(Tes... 目录一、创建 Caching 配置类二、创建需要缓存数据的类三、测试方法Spring Boot 熟悉后,集成一个外

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

Jenkins中自动化部署Spring Boot项目的全过程

《Jenkins中自动化部署SpringBoot项目的全过程》:本文主要介绍如何使用Jenkins从Git仓库拉取SpringBoot项目并进行自动化部署,通过配置Jenkins任务,实现项目的... 目录准备工作启动 Jenkins配置 Jenkins创建及配置任务源码管理构建触发器构建构建后操作构建任务

电脑多久清理一次灰尘合? 合理清理电脑上灰尘的科普文

《电脑多久清理一次灰尘合?合理清理电脑上灰尘的科普文》聊起电脑清理灰尘这个话题,我可有不少话要说,你知道吗,电脑就像个勤劳的工人,每天不停地为我们服务,但时间一长,它也会“出汗”——也就是积累灰尘,... 灰尘的堆积几乎是所有电脑用户面临的问题。无论你的房间有多干净,或者你的电脑是否安装了灰尘过滤器,灰尘都

使用Spring Cache时设置缓存键的注意事项详解

《使用SpringCache时设置缓存键的注意事项详解》在现代的Web应用中,缓存是提高系统性能和响应速度的重要手段之一,Spring框架提供了强大的缓存支持,通过​​@Cacheable​​、​​... 目录引言1. 缓存键的基本概念2. 默认缓存键生成器3. 自定义缓存键3.1 使用​​@Cacheab

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.