技术背景项目使用的框架为vue2，构建工具为webpack。有问题的项目经常迭代。每次上线后，需要通知业务员（用户）手动刷新，才能使用。系统，否则会一直用老版本，会出现一些不可预知的错误。vue框架开发之所以是单页web应用（SPA）通俗解释就是在网页初始化的时候加载相应的HTML、JavaScript和CSS。一旦页面加载完毕，SPA不会因为用户的操作而重新加载或跳转页面；而是通过路由机制实现HTML内容的改变，UI与用户交互，避免页面重载。优点用户体验好且速度快，内容变化不需要重新加载整个页面，避免不必要的跳转和重复渲染；即使是以上几点，SPA对服务器的压力也相对较小；前后端职责分离，结构清晰，前端为交互逻辑，后端负责数据处理缺点初始加载耗时较多；为了实现单页Web应用的功能和显示效果，需要在加载页面时统一加载JavaScript和CSS，部分页面按需加载，前向后向路由管理。总结由于是单页应用，用户一进入网站，HTML和相应的资源就会利用浏览器的缓存机制存储在本地。这样做的好处是再次进入网站时，可以利用缓存机制快速进入网站。这也造成了我们的项目版本迭代后，由于缓存机制，用户会继续使用旧的迭代版本，需要用户手动刷新请求服务器获取新的HTML才能使用新的迭代版本。用户手动刷新获取新版html（需要在nginx中配置，在nginx.conf文件中设置，这样index.html就不会被缓存）。所需项目迭代后，用户会有版本更新或自动刷新的提示，方便用户升级版本。感知方案原理图版本号打包自动创建当前时间戳接口获取的版本号：是webpack构建时自动创建的版本号，版本接口文件静态页面版本号为generated：在webpack构建过程中自动创建版本号，自动写入index.html页面meta信息中的代码中。nginx配置-在nginx.conf文件中进行设置，使index.html不缓存location=/index.html{root/usr/share/nginx/html;add_headerCache-Control"no-cache,no-store";}version.js创建版本文件constfs=require('fs')//importfilemoduleconstTimestamp=newDate().getTime()fs.writeFile('public/version.json','{"version":'+Timestamp+'}\n',function(err){if(err){returnconsole.log(err)}})package.jsonvue构建命令:"build:prodb":"nodeversion.js&&vue-cli-servicebuild--modeprodb"version.js是由版本号自动生成的文件，供请求接口使用。vue.config.jsvue2-配置文件-vue.config.js//获取版本号数据constbpmVersion=process.env.NODE_ENV==='production'||process.env.NODE_ENV==='prodb'?require('./public/version.json'):{version:'dev'}module.exports={pages:{index:{//页面入口entry:'src/main.js',//模板源模板:'public/index.html',//在dist/index.html中输出filename:'index.html',version:bpmVersion.version,//版本号//此页面包含的块，默认情况下将包含//提取的通用块和供应商块。chunks:['chunk-vendors','chunk-common','index']}}index.htmlindex.html-页面配置版本号字段存储"/>generate-asset-webpack-plugin也可以创建constGeneratorAssetPlugin=require('generate-asset-webpack-plugin');const{name}=require('./package.json');consttimestamp=newDate().getTime();constversion=`v${timestamp}`;constcreateJson=function(){constdata={app:{name,version}};returnJSON.stringify(data);};plugins:[//生成版本标识符newGeneratorAssetPlugin({filename:'app.json',fn:(compilation,cb)=>{cb(null,createJson());}})],chainWebpack:(config)=>{config.plugin('html').tap(args=>{args[0].name=name;args[0].version=timestamp;returnargs});}生成应用.json文件内容如下：{"app":{"name":"app-name","version":"v1649818515910"}}目前是页面的版本号和界面，这些都准备好了，剩下的就是比较两个版本了。关于比对，为了避免不必要的界面比对，特意将比对的时机固定在进入路由加载页面后，这样用户体验会更好（纯属个人感受）。router.js对比代码router.jsrouter.afterEach(async(to,form)=>{//生产环境提示升级if(process.env.NODE_ENV==='production'||process.env.NODE_ENV==='prodb'){constcheckVersion=awaitstore.dispatch('checkVersion')if(!checkVersion){//Message.warning('自动升级到新版本...',2,()=>{window.location.reload()//如果版本不同则刷新获取最新版本})}}})store.jsstore.jsactions:{checkVersion({commit,state}){returnnewPromise(resolve=>{Axios.get('/version.json?v='+newDate().getTime(),{headers:{'Cache-Control':'no-cache'},baseURL:window.location.origin})//不管怎样，就是请求json文件的内容，禁止缓存。then(res=>{constversion=res.versionconstclientVersion=Number(document.querySelector('#BPMVersion').content||'')resolve(version===clientVersion)})})}}优化函数目前可以满足要求，但是我们c还要添加版本号以检查当前使用情况哪个版本是store.jscheckVersion({commit,state}){returnnewPromise(resolve=>{Axios.get('/version.json?v='+newDate().getTime(),{headers:{'Cache-Control':'no-cache'},baseURL:window.location.origin})//反正就是请求json文件的内容，禁止缓存.then(res=>{constversion=res.versionconstclientVersion=Number(document.querySelector('#BPMVersion').content||'')//下面是查看版本号启动时间-启动console.info('%cEnvironment'+'%c'+process.env.NODE_ENV+'','填充：1px；边框半径：3px003px；颜色：#fff；背景：#606060'，'填充：1px；边框半径：03px3px0;颜色：#fff；背景：#42c02e')console.info('%cBuildDate'+'%c'+dateFtt('yyyy-MM-ddhh:mm:ss',newDate(clientVersion))+'','填充：1px;边界半径：3px003px；颜色：#fff；背景：#606060'，'填充：1px；边界半径：03px3px0；颜色：#fff；背景：#1475b2')console.info('%cLastBuildDate'+'%c'+dateFtt('yyyy-MM-ddhh:mm:ss',newDate(version))+'','padding:1px;border-radius:3px003px;color:#fff;background:#606060','padding:1px;border-radius:03px3px0;color:#fff;background:#1475b2')//-endresolve(version===clientVersion)})})}版本号查看效果页面提示控制台输出下一条公告里面会有vite和webpack的对比文章和例子，以及你踩过的坑会和大家分享到最后目前的代码只适用于vue2版本，里面的原理可以参考其他框架。因为整个解决过程只有前端参与，每次路由切换都会导致需要请求比较版本号接口，造成接口的一点浪费。目前，没有更好的方法来解决这个问题。期待未来的计划对这方面进行优化。团队介绍海亮科技（GFE）交易合规前端团队（GFE）隶属于海亮科技（北京）交易合规业务线研发部，是一支充满激情、富有创造力的团队，坚持技术-带动整体增长。27岁，有在各自领域耕耘多年的大牛，也有应届毕业生。我们在工程化、编码质量、性能监控、微服务、交互体验等领域积极探索，追求技术驱动产品落地的宗旨，打造完整的前端技术体系。愿景：成为最值得信赖和影响力的前端团队使命：坚持客户体验至上，为商业创造更多可能文化：勇于承担，深入商业，团队合作，简单开放Github：github.com/gfe-team团队邮箱：gfe@goldentec.com作者：GFE团队版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
