为什么vue页面更新添加需要刷新,vue组件刷新
本文主要介绍Vue项目部署后提示刷新版本的相关信息。通过示例代码进行了非常详细的介绍，对大家学习或使用vue有一定的参考价值。有需要的朋友可以参考一下。
vue项目新版本部署后，如果用户不刷新页面，可能会出现一些异常，需要刷新后才能正常使用。因此，希望每次部署新版本时都提示用户刷新浏览器。
之前看vue文档，发现有类似的功能。
查了很多资料，网上说的大多是通过接口调用获取版本号，与本地版本号进行比对。但是，我只想用前端的方法，怎么办？如果不行，我只能查资料，开发一个webpack插件进行处理。
VersionWebpackPlugin主代码：
/***
*标题：versionWebpackPlugin.js
*作者：加布
*电子邮件：
*时间：2022-06-27 14:24
*最后编辑时间：2022-06-27 14:24
*最后编辑：加布
*描述：
*/
const fs=require( fs )；
const path=require( path )；
const config=require(./package . JSON’)；
const readFile=file path=fs . read file sync(file path， utf8 )；
const resolve=(.dir)=path.resolve(__dirname，.,dir)；
const resolveApp=(.dir)=resolve(src ，dir)；
const plugin name= versionWebpackPlugin ；
const version filename= version . JSON ；
类别版本WebpackPlugin {
应用(编译器){
//1.自动注入webpack.entry
compiler . options . entry . app . import=[
.编译器.选项.条目.应用程序.导入，
.[./src/libs/version.js]
];
//2.将版本号写入主文件
compiler . hooks . before run . tap(plugin name，()={
let content=readFile(resolve( build/， version . js )；
let string=content . tostring()；
字符串=字符串.替换(
{{currentVersion}} ，
config.version _ Date.now()
);
字符串=字符串.替换(
{ {版本文件路径}} ，
静态/版本文件名
);
fs . writefile(resolve( src/libs/， version.js )，string，()={
//console.log(更新完成)；
});
fs.writeFile(
resolve(static/，versionFileName)，
的意思
“版本”:“”
配置.版本
_
Date.now()
\n
},
()={
//console.log(更新完成)；
}
);
});
}
module . exports=versionWebpackPlugin；
项目是vue-cli5创建的，配置文件应该是自己创建的。要在vue.config.js中配置它，可以使用以下两种导入方法。
const path=require( path )；
//const versionPlugin=require(。/build/version-web pack-plugin )；
模块.导出={
//公共路径(必须在那里)默认为/
公共路径：“”。/,
//输出文件目录默认距离
输出目录：距离，
//存储静态资源的文件夹的默认根目录(相对于outputDir)
资产目录：静态，
//生产环境源映射关闭
productionSourceMap: false，
//webpack全局变量配置
configureWebpack: {
//插件：[新版本插件()]
},
chainWebpack: config={
配置。插件(版本-web pack-插件)。使用(要求(。/build/version-webpack-plugin )，[{ }])；
}
};
这里大致说一下，看小伙伴们自己能不能完成。新项目部署完成后，右下角会弹出新版本更新的提示。单击更新。
总结
以上就是这篇关于Vue项目后期部署提示刷新版本的文章。关于Vue提示刷新版本的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。