一种前端应用版本管理优化方法与流程

1.本发明涉及互联网技术领域，更具体的说，本发明涉及一种前端应用版本管理优化方法。


背景技术：

2.随着互联网技术的发展，web前端应用广泛应用与移动端h5，pc端web，前端应用因其灵活性高、开发成本低、制作周期短等优势，越来越广泛的被应用。为了避免客户端app需要频繁发版的问题，前端应用往往迭代快速和经常需要更新。
3.前端应用的更新后，有时会因缓存的原因造成当前浏览器加载的应用和现有服务器的应用版本不一致，或者部分资源不一致，导致页面异常，页面布局错乱等显示问题；当本地数据的存取、逻辑操作、前端应用跟后端应用的交互和应用版本有关联时，也可能会因版本更新后的缓存原因，导致逻辑处理错误，最终导致功能异常。


技术实现要素：

4.为了克服现有技术的不足，本发明提供一种前端应用版本管理优化方法，该方法确保当前浏览器加载和显示的前端应用版本是和后端服务器上的一致。
5.本发明解决其技术问题所采用的技术方案是：一种前端应用版本管理优化方法，其改进之处在于，该方法包括以下步骤：
6.s10、前端应用项目的创建，完成该前端应用项目的功能开发；
7.s20、创建版本管理的json文件，用于管理每次发版的版本号；
8.s30、创建版本更新逻辑脚本文件，并安装网络库；
9.s40、通过版本更新逻辑脚本文件，在该文件上实现版本检测与更新刷新功能的实现；
10.s50、通过步骤s40得到版本更新逻辑脚本文件和更新方法，前往全局路由拦截和使用；
11.s60、通过步骤s40得到构建好的前端应用资源包，部署到后端服务器供用户访问。
12.进一步的，步骤s10中，使用前端开发技术vue作为开发技术栈，通过脚手架vue-cli工具构建项目，通过源代码编辑器visual studio code完成前端应用的功能编写。
13.进一步的，步骤s20中，创建版本管理的轻量级数据交换格式文件json文件，每次发版时，按迭代版本更新版本信息。
14.进一步的，步骤s30中，包括以下的步骤：
15.s301、前往当前前端应用项目的代码目录src下，新建工具类目录utils，在utils目录下创建版本更新逻辑脚本versionupdate.js文件，用于编写版本检测以及更新逻辑；
16.s302、前往当前前端应用项目所在目录下的终端，执行安装vue下的网络库axios命令npm install axios
‑‑
save-dev，安装网络库axios。
17.进一步的，步骤s40中，前往版本更新逻辑脚本versionupdate.js文件实现版本更
新缓存处理，包括以下步骤：
18.s401、对网络库axios引入操作import axios from'axios'，并启用网络请求插件；
19.s402、定义箭头函数const isnewversion＝()＝》{}，用于检测版本更新，以及版本更新的逻辑操作处理；
20.s403、根据自身需求，通过当前的开发环境判断是否需要处理缓存的问题，如果不需要处理，则直接使用retrun返回。
21.进一步的，步骤s403中，当前开发环境需要处理缓存问题时，包括以下步骤：
22.s4031、通过const url＝`json/version.json？t＝${new date().gettime()}`声明上述版本文件version.json的目录地址；
23.s4032、使用网络库axios的get请求方法，获取当前版本文件version.json里当前前端应用项目的版本信息；
24.s4033、通过本地存储localstorage的取值方法getitem获取缓存中的当前前端应用版本信息const localvueversion＝localstorage.getitem('ys_htk_versioin')；
25.s4034、当步骤s4033中获取到的缓存中的版本信息存在，且与步骤s4032中获取到的当前前端应用的版本信息不一致时，表明当前前端应用有新版本，否则表明当前前端应用没有新版本；
26.s4035、当步骤s4034中得到当前前端应用无新版本，则将步骤s4032获取到的最新的前端应用版本，通过本地存储localstorage的更新值方法setitem方法保存到本地，留待取值用；
27.s4036、当步骤s4034得到当前前端应用有新版本，通过本地存储localstorage的更新值方法setitem方法保存到本地，且通过js窗口刷新方法window.location.reload(true)刷新当前窗口，传参数true不走缓存，从服务端重新获取数据；
28.s4037、当步骤s4034得到当前前端应用有新版本，对于依赖于版本的接口以及本地数据，需及时更新接口和本地数据；
29.s4038、通过js模块默认导出方法export default{isnewversion}，将该模块在需要用到的地方导出使用。
30.进一步的，步骤s50中，前往拦截全局路由和采用更新方法，只要前端应用有更新就会忽略浏览器缓存重新加载页面，包括：
31.s501、从步骤s10中得到当前前端应用项目的路由管理文件router.js，引入步骤s40得到的versionupdate模块，通过js模块引入import方法引入versionupdate模块；
32.s502、通过路由守卫方法全局钩子函数router.beforeeach((to,from,next)进行拦截；
33.s503、在路由全局钩子函数beforeeach内判断当前代码版本是否与服务器中代码版本一致，如不一致则忽略缓存刷新页面。
34.进一步的，步骤s10至步骤s50中，还包括对打包的配置的步骤：
35.s101、根据脚手架vue-cli版本的不同，当脚手架vue-cli版本在2.0的，模块打包工具webpack的生产配置文件webpack.prod.conf.js；设置打包输出内容output的chunkhash代表的是模块chunk文件的哈斯hash，模块发生改变才会重新生成hash，用于打
包时输出文件的文件名带上hash值，确保该文件的唯一；
36.s102、根据脚手架vue-cli版本的不同，当脚手架vue-cli版本在3.0的，前往s10中得到的当前前端应用项目可选配置文件vue.config.js中配置打包输出内容output；
37.配置文件输出哈斯属性filenamehashing值为true，使得当前前端应用项目打包后得到的文件均带哈斯hash值；
38.若上述配置不生效，则加上两个添加方法
39.config.output.filename('js/[name].[hash:8].js').end()和config.output.chunkfilename('js/[name].[hash:8].js').end()即可；
[0040]
s103、当完成步骤s101、s102、s20-s50后，前往s10前端应用项目所在的终端，执行前端应用构建打包命令npm run build，命令执行完成即可以部署到后端用于访问的前端应用。
[0041]
进一步的，步骤s60中，包括以下步骤：
[0042]
s601、将构建好的前端应用资源包，部署到后端服务器存放该资源包的目录下；
[0043]
s602、浏览器加载该前端应用时，前端应用通过s10-s50的步骤进行版本检测和刷新应用，加载后端服务器最新版本的前端应用资源，同时浏览器会根据s60打包构建出的资源名称文件，访问到正确的资源。
[0044]
本发明的有益效果是：本发明能够确保当前浏览器加载和显示的前端应用版本是和后端服务器上的一致；解决前端应用版本更新因缓存原因导致的页面版本更新时的页面错乱等显示异常问题。
附图说明
[0045]
图1为本发明的一种前端应用版本管理优化方法的具体实施例图。
具体实施方式
[0046]
下面结合附图和实施例对本发明进一步说明。
[0047]
以下将结合实施例和附图对本发明的构思、具体结构及产生的技术效果进行清楚、完整地描述，以充分地理解本发明的目的、特征和效果。显然，所描述的实施例只是本发明的一部分实施例，而不是全部实施例，基于本发明的实施例，本领域的技术人员在不付出创造性劳动的前提下所获得的其他实施例，均属于本发明保护的范围。另外，专利中涉及到的所有联接/连接关系，并非单指构件直接相接，而是指可根据具体实施情况，通过添加或减少联接辅件，来组成更优的联接结构。本发明创造中的各个技术特征，在不互相矛盾冲突的前提下可以交互组合。
[0048]
参照图1所示，本发明揭示了一种前端应用版本管理优化方法，通过该方法，以确保当前浏览器加载和显示的前端应用版本是和后端服务器上的一致；具体的，在本实施例中，该方法包括以下步骤：
[0049]
s10、前端应用项目的创建，完成该前端应用项目的功能开发；
[0050]
本实施例中，步骤s10中，使用前端开发技术vue作为开发技术栈，通过脚手架vue-cli工具构建项目，通过源代码编辑器visual studio code完成前端应用的功能编写。从而得到已完全功能需求，能正常使用的当前前端应用项目。
[0051]
s20、创建版本管理的json文件，用于管理每次发版的版本号；
[0052]
创建版本管理的轻量级数据交换格式文件json文件，命名为version.json；每次发版时，按迭代版本更新版本信息。具体的，本实施例中，步骤s20包括以下的步骤：
[0053]
s201、根据脚手架版本的不同，脚手架vue-cli版本在2.0的，在静态目录static下新建version.json每次发版更改里面的版本号：{"version":"1.0.0"}；
[0054]
s202、脚手架vue-cli版本在3.0及以上的，在当前前端应用项目的public目录下新建version.json每次发版更改里面的版本号：{"version":"1.0.0"}。
[0055]
s30、创建版本更新逻辑脚本文件，并安装网络库；本实施例中，步骤s30包括以下的步骤：
[0056]
s301、前往当前前端应用项目的代码目录src下，新建工具类目录utils，在utils目录下创建版本更新逻辑脚本versionupdate.js文件，用于编写版本检测以及更新逻辑；
[0057]
s302、前往当前前端应用项目所在目录下的终端，执行安装vue下的网络库axios命令npm install axios
‑‑
save-dev，安装网络库axios。
[0058]
s40、通过版本更新逻辑脚本文件，在该文件上实现版本检测与更新刷新功能的实现；
[0059]
步骤s40中，前往版本更新逻辑脚本versionupdate.js文件实现版本更新缓存处理，包括以下步骤：
[0060]
s401、对网络库axios引入操作import axios from'axios'，并启用网络请求插件；
[0061]
s402、定义箭头函数const isnewversion＝()＝》{}，用于检测版本更新，以及版本更新的逻辑操作处理；
[0062]
s403、根据自身需求，通过当前的开发环境判断是否需要处理缓存的问题，如果不需要处理，则直接使用retrun返回。
[0063]
更进一步的，步骤s403中，当前开发环境需要处理缓存问题时，包括以下步骤：
[0064]
s4031、通过const url＝`json/version.json？t＝${new date().gettime()}`声明上述版本文件version.json的目录地址；
[0065]
s4032、使用网络库axios的get请求方法，获取当前版本文件version.json里当前前端应用项目的版本信息；
[0066]
s4033、通过本地存储localstorage的取值方法getitem获取缓存中的当前前端应用版本信息const localvueversion＝localstorage.getitem('ys_htk_versioin')；
[0067]
s4034、当步骤s4033中获取到的缓存中的版本信息存在，且与步骤s4032中获取到的当前前端应用的版本信息不一致时，表明当前前端应用有新版本，否则表明当前前端应用没有新版本；
[0068]
s4035、当步骤s4034中得到当前前端应用无新版本，则将步骤s4032获取到的最新的前端应用版本，通过本地存储localstorage的更新值方法setitem方法保存到本地，留待取值用；
[0069]
s4036、当步骤s4034得到当前前端应用有新版本，通过本地存储localstorage的更新值方法setitem方法保存到本地，且通过js窗口刷新方法window.location.reload(true)刷新当前窗口，传参数true不走缓存，从服务端重新获取数据；
[0070]
s4037、当步骤s4034得到当前前端应用有新版本，对于依赖于版本的接口以及本地数据，需及时更新接口和本地数据；
[0071]
s4038、通过js模块默认导出方法export default{isnewversion}，将该模块在需要用到的地方导出使用。
[0072]
s50、通过步骤s40得到版本更新逻辑脚本文件和更新方法，前往全局路由拦截和使用；
[0073]
步骤s50中，前往拦截全局路由和采用更新方法，只要前端应用有更新就会忽略浏览器缓存重新加载页面，包括：
[0074]
s501、从步骤s10中得到当前前端应用项目的路由管理文件router.js，引入步骤s40得到的versionupdate模块，通过js模块引入import方法引入versionupdate模块；
[0075]
s502、通过路由守卫方法全局钩子函数router.beforeeach((to,from,next)进行拦截；
[0076]
s503、在路由全局钩子函数beforeeach内判断当前代码版本是否与服务器中代码版本一致，如不一致则忽略缓存刷新页面。
[0077]
更进一步的，步骤s10至步骤s50中，还包括对打包的配置的步骤：
[0078]
s101、根据脚手架vue-cli版本的不同，当脚手架vue-cli版本在2.0的，模块打包工具webpack的生产配置文件webpack.prod.conf.js；设置打包输出内容output的chunkhash代表的是模块chunk文件的哈斯hash，模块发生改变才会重新生成hash，用于打包时输出文件的文件名带上hash值，确保该文件的唯一；
[0079]
s102、根据脚手架vue-cli版本的不同，当脚手架vue-cli版本在3.0的，前往s10中得到的当前前端应用项目可选配置文件vue.config.js中配置打包输出内容output；
[0080]
配置文件输出哈斯属性filenamehashing值为true，使得当前前端应用项目打包后得到的文件均带哈斯hash值；
[0081]
若上述配置不生效，则加上两个添加方法
[0082]
config.output.filename('js/[name].[hash:8].js').end()和config.output.chunkfilename('js/[name].[hash:8].js').end()即可；
[0083]
s103、当完成步骤s101、s102、s20-s50后，前往s10前端应用项目所在的终端，执行前端应用构建打包命令npm run build，命令执行完成即可以部署到后端用于访问的前端应用。
[0084]
s60、通过步骤s40得到构建好的前端应用资源包，部署到后端服务器供用户访问。在本实施例中，步骤s60中，包括以下步骤：
[0085]
s601、将构建好的前端应用资源包，部署到后端服务器存放该资源包的目录下；
[0086]
s602、浏览器加载该前端应用时，前端应用通过s10-s50的步骤进行版本检测和刷新应用，加载后端服务器最新版本的前端应用资源，同时浏览器会根据s60打包构建出的资源名称文件，访问到正确的资源。网络环境正常的情况下，正常访问该前端应用，并正常显示出来。
[0087]
本发明中，通过比较version.json和本地存储的版本信息进行比较来判断是否有新版本应用，通过window.location.reload(true)强制刷新当前窗口，且从服务器获取最新的资源，从而避免浏览器缓存的影响。通过路由守卫方法全局钩子函数统一拦截和建议
版本信息，并镜像当前端有版本更新时的页面刷新操作和本地数据的处理通过模块打包工具webpack配置打包输出的资源文件，确保每次文件有更新时输出的打包资源文件都带有新的哈斯值，让浏览器可以重新下载，避免缓存影响。
[0088]
基于上述的实施例，本发明能够确保当前浏览器加载和显示的前端应用版本是和后端服务器上的一致；解决前端应用版本更新因缓存原因导致的页面版本更新时的页面错乱等显示异常问题；确保浏览器加载的前端应用和后端服务器部署的前端应用版本一致，避免因版本不一致引起的逻辑处理以及前后端交互异常导致功能不能正常使用。
[0089]
以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本技术权利要求所限定的范围内。