VUE项目更新后需要客户手动刷新浏览器问题

解决思路(不需要后端配合情况下):

vue项目大部分通过nginx发布,在vue项目中添加定时版本查询方法,以及放置版本描述的json文件。当检测到版本变化后,在客户当前页面以可见的提醒方式告知检测到版本变化,并实施自动页面刷新加载新版本。

实现

1. 在public文件夹下添加 version.json 文件,此文件打包时会自动打包在dist/version.json。这样可通过axios方法直接访问

在这里插入图片描述
version.json里面的内容,后面可改成时间戳(防止浏览器缓存)

{
	"version":"1.0.0"
}
2. 在入口app.vue添加定时方法生产环境下axios请求version.json版本并存入localstorage,检测到变化后提醒用户并自动刷新页面

在这里插入图片描述
代码如下:

getVersion() {
	let url = `//${window.location.host}/version.json`;
	if (process.env.NODE_ENV === "production") {
		axios.get(url).then(res => {
			let lastVersion = res.data.version;
			if (localStorage.version == undefined) {
				localStorage.setItem("version", lastVersion)
			} else {
				if (localStorage.version != lastVersion) {
					localStorage.removeItem("version");
					this.instance = this.$notify({
						title: '版本升级提示',
						dangerouslyUseHTMLString: true,
						duration: 0,
						showClose: false,
						message: `
							<div style="color: #1b558f">检测到版本更新,刷新页面!!</div>
							<button style="
								padding: 10px 20px;
								color: #409eff;
								background: #ecf5ff;
								border-color: #b3d8ff;
								margin-top: 10px;
								border: 0;
								border-radius: 4px;
								cursor: pointer;
							">点击刷新</button>
						`,
						onClick: () => {
							this.instance.close(); // 手动关闭通知
							window.location.reload();
						}
					});
				}
			}
		})
	} 
}
3. 打包时自动编译版本到version.json文件(版本换成时间)

vue.config.js文件添加,每次打包后自动获取编译时间写入版本文件
在这里插入图片描述

代码如下:

const Timestamp = new Date().getTime();
const fs = require('fs');
let testVersion = require('./public/version.json') || [];


testVersion = {'version': Timestamp};
fs.writeFile('./public/version.json', JSON.stringify(testVersion), () => {
	console.log('新版本号生成成功;' + testVersion.version);
});

记着 npm install fs !!!
记录一下。。。。。。
参考:https://blog.csdn.net/qq_27437073/article/details/124748703?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-5-124748703-blog-126014600.pc_relevant_3mothn_strategy_and_data_recovery&spm=1001.2101.3001.4242.4&utm_relevant_index=8

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值