解决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 = thisif (process.env.NODE_ENV === "development") {_this.$axios.get("/version.json",{}).then(res => {console.log("查询版本")let lastVersion=res.data.versionconsole.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.versionconsole.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('新版本号生成成功');});}
解决VUE项目更新后需要客户手动刷新浏览器问题相关推荐
- 打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
- 快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题 为什么打包后文件过大? 如何快速解决 一.路由懒加载[使用es6提案的import()方式] 二.CDN引入 为什么打包后文件过大? 移动app项目,使用vue- ...
- php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
- vue 打开html流_解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最 ...
- 解决vue项目打包后打开index.html一片空白
Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最 ...
- vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...
解解决决Vue项项目目打打包包后后打打开开index.html页页面面显显示示空空白白以以及及图图片片路路径径错错误误的的问问题题 V ue项目运行npm run build后会生成一 dist文件夹 ...
- 解决vue项目打包后文件过大导致首屏加载30s+的问题
依赖 vue v2.6 axios+tailwindcss+element-ui+... 文件打包情况 File Size Gzippeddist/js/chunk-vendors.fb40d429. ...
- vue 打开html流_三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题...
index.html为什么打不开? Vue打包后生成的dist文件中的index.html,双击在浏览器中打开后发现一片空白,打开控制台有很多报错:"Failed to load resou ...
- 解决vue项目打包后woff、tff资源路径加载错误
错误路径 解决方法: 重新打包
最新文章
- c语言组队,组队列问题。会做的高手帮帮忙啊
- vue-cli3+typescript初体验
- Genome Sequencing and Assembly by Long Reads in Plants植物基因组的长读测序与组装
- 取得cpu核心序号_cpu的性能指标有哪些?
- SO做了Booked之后,一直处理于“已延交”,发运事务处理的活动区变灰
- 事件ID 5775 NETLOGON
- Microsoft.AspNet.Identity 自定义使用现有的表—登录实现
- 【git】Git Submodule管理项目子模块
- Spring-beans-BeanDefinitionRegistry
- j2ee不同数据库的驱动和URL写法
- memcached并发CAS模式
- php 字母加1,PHP语法(1)
- PHP 获取微视无水印源地址_PHP快速实现解析无水印播放地址URL——快手篇
- java实现断点续播_javaweb 播放视频通过断点续传拖动滚动条
- 微信公众平台实现天气预报功能
- 中国象棋c语言源代码csdn,中国象棋源代码-C语言小程序
- 数据中心机房监控大厅效果图
- Springboot中@autowired和@resource注解的区别
- 在VMware中安装新版Ubuntu后,无法跨虚拟机复制粘贴和拖拽文件的解决方法
- MySql中数据表增加字段很慢