Vue项目部署后提示刷新版本的实现代码
作者：Gaby
这篇文章主要给大家介绍了关于Vue项目部署后提示刷新版本的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
vue项目部署新版本后，用户如果不刷新页面，可能会出现一些异常，需要刷新后才能正常使用，所以希望每次部署新版本后，提示用户刷新浏览器。
之前看vue文档，发现类似的功能。
查了好些资料，网上说的大部分也都是通过接口调用获取版本号与本地版本号进行对比，然而我只想用纯前端的方式，那该怎么做呢，实在不行就只能查资料自己开发个 webpack 插件进行处理了。
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.entry
compiler.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: './',
// 输出文件目录 默认dist
outputDir: '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'), [{}]);
}
};
这里先抛个大概思路，看看小伙伴们是否能自行完成，新部署项目后，右下角弹出提示有新版本更新，点击更新。
总结
到此这篇关于Vue项目部署后提示刷新版本的文章就介绍到这了,更多相关Vue提示刷新版本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！