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));

第二步:
在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);
})

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

你可能感兴趣的:(vue,vue.js,前端,javascript)