Vue项目部署后提示刷新版本

vue项目部署新版本后，用户如果不刷新页面，可能会出现一些异常，需要刷新后才能正常使用，所以希望每次部署新版本后，提示用户刷新浏览器。

之前看vue文档，发现类似的功能。

查了好些资料，网上说的大部分也都是通过接口调用获取版本号与本地版本号进行对比，然而我只想用纯前端的方式，那该怎么做呢，实在不行就只能查资料自己开发个 webpack 插件进行处理了。

在 vuecli5 中 webpack 入口文件 配置 层级 为 compiler.options.entry.app.import = [] 所以在合并入口文件数据的时候按照以下形式处理。

// 自动注入到 webpack.entry
compiler.options.entry.app.import = [...compiler.options.entry.app.import,...['./src/libs/version.js']
]; 

versionWebpackPlugin 主要代码：

/***
 * title: versionWebpackPlugin.js
 * Author: Gaby
 * Email: 
 * Time: 2022-06-27 14:24
 * LastEditTime: 2022-06-27 14:24
 * LastEditors: Gaby
 * Description:
 */

const fs = require('fs');
const path = require('path');
const config = require('../package.json');
const readFile = filePath => fs.readFileSync(filePath, 'utf8');
const resolve = (...dir) => path.resolve(__dirname, '..', ...dir);
const resolveApp = (...dir) => resolve('src', ...dir);
const pluginName = 'versionWebpackPlugin';
const versionFileName = 'version.json';

class versionWebpackPlugin {apply(compiler) {// 1.自动注入到 webpack.entrycompiler.options.entry.app.import = [...compiler.options.entry.app.import,...['./src/libs/version.js']];// 2.将版本号写入到 main 文件中compiler.hooks.beforeRun.tap(pluginName, () => {let content = readFile(resolve('build/', 'version.js'));let string = content.toString();string = string.replace('{{currentVersion}}',config.version + '_' + Date.now());string = string.replace('{{VERSION_FILE_PATH}}','static/' + versionFileName);fs.writeFile(resolve('src/libs/', 'version.js'), string, () => {// console.log('更新完成');});fs.writeFile(resolve('static/', versionFileName),'{\n' +'"version": "' +config.version +'_' +Date.now() +'"\n' +'}',() => {// console.log('更新完成');});});
}
module.exports = versionWebpackPlugin; 

项目中使用的是 vue-cli5 进行创建的，配置文件要自行创建,要配置在 vue.config.js中，以下两种引入方式均可。

const path = require('path');
// const versionPlugin = require('./build/version-webpack-plugin');

module.exports = {// 公共路径(必须有的) 默认/publicPath: './',// 输出文件目录 默认distoutputDir: 'dist',// 静态资源存放的文件夹(相对于outputDir) 默认根目录assetsDir: 'static',// 生产环境SourceMap关productionSourceMap: false,// webpack 全局变量配置configureWebpack: {// plugins: [new versionPlugin()]},chainWebpack: config => {config.plugin('version-webpack-plugin').use(require('./build/version-webpack-plugin'), [{}]);}
}; 

效果如下：

这里先抛个大概思路，看看小伙伴们是否能自行完成，新部署项目后，右下角弹出提示有新版本更新，点击更新。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取