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

本文主要是介绍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);
})