Vue项目重新部署后，提示用户刷新网页

vue项目部署后，如果用户没刷新页面，浏览器其实加载的还是旧的js文件，如何解决呢？

网上很多方案：
1：websocket监听，需要后台配置
2: 前端header传一个参数，和后台去匹配，类似登录超时功能，需要后台配置
3，前端生成json文件，存储版本号，通过接口调用这个json文件，不需要后台配合

我选择的是第三种。我是用的vite，和webpack差不多

直接上代码：

第一步：
新建一个update-version.js文件

const fs = require('fs');
const path = require('path');

const versionNumber = new Date().getTime();

const fileContents = {
  version: versionNumber.toString()
};
//build时，会自动在dist目录生成一个json文件
fs.writeFileSync(path.join(__dirname, 'dist', 'version.json'), JSON.stringify(fileContents));
1
2
3
4
5
6
7
8
9
10

第二步：
在package.json文件修改build命令
“scripts”: {
“dev”: “vite”,
“build”: “vite build && node update-version.js”
},

第三步：
在request.js文件，增加如下代码：

import axios from 'axios'
import md5 from 'md5'

const service = axios.create({
    timeout: 10000
});
//刷新页面----------start--------------------
let isUpdatePromptShown = false; //多个请求时，只提示一次
service.interceptors.request.use(async request => {
    const response = await axios.get('/version.json');
    const acrmVersion = response.data.version;
    const currentVersion = localStorage.getItem('acrm-app-version')
    if(currentVersion === null){
        localStorage.setItem('acrm-app-version',acrmVersion)
    }else if(currentVersion !== acrmVersion && !isUpdatePromptShown){
        localStorage.setItem('acrm-app-version',acrmVersion)
        ElMessageBox.confirm(
            '亲爱的用户，我们的系统有了新的更新，为了您能更好地使用，烦请您刷新一下页面哦！',
            '系统提示',
            {
                confirmButtonText: '确定',
                type: 'warning',
                showClose: false,   //不显示关闭小图标
                showCancelButton: false,  // 不显示取消按钮
                closeOnClickModal: false, // 点击对话框周围不关闭对话框
            }
            )
            .then(() => {
              location.reload()
            })
            isUpdatePromptShown = true;
            throw new axios.Cancel('需要刷新，阻止继续执行操作');
    }
    //刷新页面----------end--------------------
        request.headers["x-requested-with"] = "XMLHttpRequest";
    return request;
}, error => {
    return Promise.reject(error);
})
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
34
35
36
37
38
39

第四步：
本地想测试这个功能，直接在public新建一个version.json文件就行