前端版本更新提示

前端版本更新提示

前言：最近项目发布比较频繁、导致每次都要主动告知用户/测试 去刷新清除页面缓存、从而防止发了新功能之后、用户因为没有刷新页面/清除缓存，一直使用的还是旧版本。所以就着手写一个检测到发布了新版本就自动提醒用户去刷新页面的功能。

一、思路：
我们可以通过每次打包构建(npm run build)之后给包打一个唯一标识并且挂载到页面中的某个标签上或者存在本地缓存(localStorage/sessionStroage)、从而来确定唯一性，然后通过判断本地的存储的唯一标识是否与当前服务器上的资源记录的唯一标识是否一致。相等那就证明是最新版本不需要做操作、不相等则证明发布了新版本需要提醒用户刷新。

二、实现：
(1). 首先在项目根目(与package.json同一层级)录写一个js脚本：用于每次构建时、创建一个版本文件。（提供给后续通过请求获取、进行版本对比使用）。

我这里使用到时间戳做为唯一标识

// version.js
const fs = require('fs');
const timestamp = new Date().getTime();
fs.writeFile('./public/version.json', `{"version": ${timestamp}}`, err => {
    if (err) {
        console.error(err);
    }
});
1
2
3
4
5
6
7
8

(2). 修改vue.config 配置

// 首先需要判断一下当前是否是生产环境（开发环境不需要此功能）
const AppVersion = process.env.NODE_ENV === 'production'
        ? require('./public/version.json')
        : {
              version: 'dev'
          };

// 接着需要在 chainWebpack 函数内加入下面这段代码
// 加入下面代码 是为了可以在 index.html 文件内访问到版本号(AppVersion.version)
module.export = {
	....
	chainWebpack: config => {
		...
		config.plugin('html').tap(args => {
		     args[0].version = AppVersion.version;
		     return args;
		});
		...
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

(3). 修改 public 文件夹内 index.html 入口文件
加入下面这段代码
此处的content 属性值访问到的就是我们的版本号(时间戳)。

<meta id="appVersion" name="version" content="<%= htmlWebpackPlugin.options.version%>" />
1

(4). 在全局路由 afterEach 钩子函数内进行判断

// store 文件内
actions: {
        checkVersion() {
            return new Promise(resolve => {
                fetch(`${window.location.origin}/version.json?v=${new Date().getTime()}`, {
                    headers: {
                        'Cache-Control': 'no-cache'
                    }
                })
                    .then(res => res.text())
                    .then(res => {
                        resolve(JSON.parse(res).version === Number(document.querySelector('#appVersion').content));
                    });
            });
        }
}

// 路由文件 
router.afterEach(async () => {
    if (process.env.NODE_ENV === 'production') {
        const flag = await store.dispatch('checkVersion');
        if (!flag) {
            MessageBox.confirm('检测到当前版本不是最新版本,刷新后立即使用', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                showCancelButton: false
            }).then(() => {
                window.location.reload();
            });
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

(5). 修改 package.json 文件

// 生产打包配置
"build:prod": "node version.js && vue-cli-service build --mode prod",
1
2

三、结尾
到这里就已经实现了这个功能、这个版本也只是最初始版本，还有很大的优化空间、有兴趣可以继续自行优化一下。例如判断版本的地方不一定非得是全局路由钩子、可以进行轮询判断等等、反正具体可以结合自己业务去做调整优化，这里只是提供一个思路。