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

一.问题：

在vue项目打包跟新后，虽然js、css等文件会添加hash值确保加载最新的文件，但是只限于客户在你更新前正好未使用平台，更新后客户在使用时，可以确保访问的前端版本是最新的，但是当客户已经打开平台某个页面放置，此时你更新了版本，用户接着操作页面时会出现各种问题导致体验不好，此时提醒用户去刷新浏览器会有较差的体验。

二.解决思路（不需要后端配合情况下）：

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

三.实现：

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

 

{
	"version":"2.0"
}

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

function(){
    				 this.$axios.get("/xxxxx/version.json",{}).then(res => {
				 	console.log("查询版本")
				 	console.log(res.data.version)
				 	if(localStorage.version==undefined){
				 		localStorage.setItem("version", res.data.version)
				 	}else{
				 		if(localStorage.version!=res.data.version){
				 			localStorage.removeItem("version") 
				 			
				 			this.$Modal.info({
				 				title: "检测到版本更新，刷新页面！！",
				 				okText: '确定',
				 				
				 				onOk: () => {
				 			
				 					this.$router.go(0)
				 				}
				 			});
				 			
				 		}
				 	}
				 		
				 	
				 })

}

***修改一版检测方法

1.开发环境和nginx发布区分+参数添加时间戳（防止浏览器缓存）

getVersion(){
				const _this = this
				
				if (process.env.NODE_ENV === "development") {
					_this.$axios.get("/version.json",{}).then(res => {
						console.log("查询版本")
						let lastVersion=res.data.version
						console.log(lastVersion)
						if(localStorage.version==undefined){
							localStorage.setItem("version", lastVersion)
						}else{
							if(localStorage.version!=lastVersion){
								localStorage.removeItem("version") 
								
								this.$Modal.info({
									title: "检测到版本更新，刷新页面！！",
									okText: '确定',
									
									onOk: () => {
								
										_this.$router.go(0)
									}
								});
								
							}
						}
							
						
					})
					
				 
				}else {
				 _this.$axios.get("/xxxx/version.json",{params:{data:new Date()}}).then(res => {
				 	console.log("查询版本")
				 	let lastVersion=res.data.version
				 	console.log(lastVersion)
				 	if(localStorage.version==undefined){
				 		localStorage.setItem("version", lastVersion)
				 	}else{
				 		if(localStorage.version!=lastVersion){
				 			localStorage.removeItem("version") 
				 			
				 			this.$Modal.info({
				 				title: "检测到版本更新，刷新页面！！",
				 				okText: '确定',
				 				
				 				onOk: () => {
				 			
				 					_this.$router.go(0)
				 				}
				 			});
				 			
				 		}
				 	}
				 		
				 	
				 })
				}
				
				
			}

2.打包时自动编译版本到version.json文件（版本换成时间）

vue.config.js文件添加,每次打包后自动获取编译时间写入版本文件（可以自己定义想写什么内容）

let test = require('./public/version.json') || [];

const {dateFormat} = require('./public/js/comm2.js')
//const time = setTime(new Date(version));
if(process.env.NODE_ENV === "production"){
	test={
	     'version': dateFormat.formatDate(new Date(),'yyyy-MM-dd hh-mm-ss')
	    };
	fs.writeFile('./public/version.json', JSON.stringify(test), () => {
	      console.log('新版本号生成成功');
	 });
	
}