以下只是一些思路,有更好的实现方式可以留言一起交流学习
方式一:纯前端
在每次发布前端时,使用webpack构建命令生成一个json文件,json中写个随机生成的一个字符串(比如时间戳),每次打包程序都会自动更新这个json文件。
在项目中,通过定时任务或者在切换页面路由时,请求json文件。使用本地保存的上一次生成的字符串和json文件中的字符串进行比较,如果两个字符串不一样,则说明前端重新部署了,提醒用户进行更新或进行强制刷新的操作。
方式二:前后端配合
在每个请求的header里面加上发版版本号,和保留在客户端的上一次版本号进行比较,如果不一致则强制刷新,刷新后保存当前版本号。(或者单独写一个返回版本号的接口)
下面重点说一下纯前端如何做:
①webpack 4构建 生成一个json文件,在项目目录下新建plugin文件夹,新建version-webpack-plugin.js如下
/** 自定义的插件: 生成版本号json文件 */
const fs = require("fs");
class VersionPlugin {
apply(compiler) {
// emit 是异步 hook,使用 tapAsync 触及它,还可以使用 tapPromise/tap(同步)
compiler.hooks.emit.tap("Version Plugin", (compilation) => {
const outputPath = compiler.path || compilation.options.output.path;
const versionFile = outputPath + "/version.json";
const timestamp = Date.now(); // 时间戳作为版本号
const content = `{"version": "${timestamp}"}`;
/** 如果路径存在则返回 true,否则返回 false。 */
if (!fs.existsSync(outputPath)) {
// 同步地创建目录。 返回 undefined 或创建的第一个目录路径(如果 recursive 为 true)。 这是 fs.mkdir() 的同步版本。
fs.mkdirSync(outputPath, { recursive: true });
}
// 生成json文件
fs.writeFileSync(versionFile, content, {
encoding: "utf8",
flag: "w",
});
});
}
}
module.exports = { VersionPlugin };
webpack3低版本的构建方式
/** 自定义的插件: 生成版本号json文件 */
const fs = require('fs')
class VersionPlugin {
apply (compiler) {
compiler.plugin('done', function () {
// 复制文件的逻辑,此时文件已经编译完成
const outputPath = compiler.outputPath
const versionFile = outputPath + '/version.json'
const timestamp = Date.now() // 时间戳作为版本号
const content = `{"version": "${timestamp}"}`
/** 如果路径存在则返回 true,否则返回 false。 */
if (!fs.existsSync(outputPath)) {
// 同步地创建目录。 返回 undefined 或创建的第一个目录路径(如果 recursive 为 true)。 这是 fs.mkdir() 的同步版本。
fs.mkdirSync(outputPath, { recursive: true })
}
// 生成json文件
fs.writeFileSync(versionFile, content, {
encoding: 'utf8',
flag: 'w'
})
})
}
}
module.exports = { VersionPlugin }
②在vue.config.js中使用这个 plugin
const { VersionPlugin } = require('./plugin/version-webpack-plugin.js');
③在每次执行webpack构建命令,都会在dist目录下生成一个version.json文件,里面有一个字段叫 version,值是构建时的时间戳,每次构建都会生成一个新的时间戳。
④发起ajax请求,请求version.json文件获取version时间戳,和本地保存的上一次的时间戳做比较,如果不一样,则进行对应的操作。/plm/version.json,plm是我项目的前缀,改成你自己的项目地址,能请求到 version.json文件就行。
import axios from 'axios'
import {MessageBox} from 'element-ui'
export function reloadVersion() {
axios.get(window.location.origin + '/plm/version.json?v=' + Date.now()).then(rsp => {
let localVersion = localStorage.getItem('localVersion')
let onlineVersion = rsp.data.version
if(onlineVersion){
if(localVersion!==onlineVersion){
// 弹框提示更新
MessageBox.confirm('有版本更新,是否刷新确保获取最新数据?', '版本更新', {
confirmButtonText: '更新',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发版版本号和本地版本号不一致,保存最新的版本号到本地,并刷新页面获取最新的页面
localStorage.setItem('localVersion',onlineVersion)
window.location.reload();
})
}
}
})
}
⑤请求发起的时机,可以使用定时器或者在切换页面的时候进行校验版本。根据自己的实际情况选择合适的调用时机。
(二)通过监听网页端的报错,进行相应的处理。
如果是覆盖式的更新,有可能发版前就已经删除了上一个版本的dist文件,会造成缓存的页面依然调用已经被删除的文件,所以会白屏报错。报错就有可能不会执行到上面发起请求获取版本号的操作。所以如果监听到如下的几种报错,可以进行刷新页面的操作,
在index.html根目录文件中加入如下代码。为了防止页面一直刷新,所以加了一个超过次数就不再继续刷新的逻辑