(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210523586.4 (22)申请日 2022.05.13 (71)申请人 银盛支付 服务股份有限公司 地址 518000 广东省深圳市龙华区民治街 道新区大道 997号远景家园五楼5 01 (72)发明人 潘信璋　 (74)专利代理 机构 深圳市深可信专利代理有限 公司 44599 专利代理师 彭光荣 (51)Int.Cl. G06F 9/445(2018.01) (54)发明名称 一种解决前端应用缓存引起渲染异常的方 法 (57)摘要 本发明公开了一种解决前端应用缓存引起 渲染异常的方法， 该方法包括以下的步骤： S10、 通过对前端应用工程进行打包配置， 使最终打包 前端构建前端应用时， 该应用里面的每个文件都 带有hash值， 确保每个文件 的唯一特性； S20、 对 前端应用的缓存策略进行编码； S30、 构建用于发 布的前端应用； S40、 对步骤S30中得到的前端应 用包， 部署到服务端相应的目录下， 用于浏览器 访问前端应用的资源地址； S50、 前往当前前端应 用部署所在的目标服务器进行该前端应用的缓 存策略配置； 本发明的有 益效果是： 解决web前端 应用在将前端应用资源包部署到服务器上进行 版本更新后， 因浏览器缓存或者服务器缓存原因 造成的加载异常， 页面布局错乱、 白屏等问题。 权利要求书2页 说明书5页 附图1页 CN 114968397 A 2022.08.30 CN 114968397 A 1.一种解决前端应用缓存引起 渲染异常的方法， 其特 征在于， 该 方法包括以下的步骤： S10、 通过对前端应用工程进行打包配置， 使最终打包前端构建前端应用时， 该应用里 面的每个文件都带有hash值， 确保每 个文件的唯一特性； S20、 通过步骤S10 完成前端应用工程的打包配置后， 对前端应用的缓存策略进行编码； S30、 通过步骤S10和 S20得到的目标前端应用项目的编码和工程配置， 构 建用于发布的 前端应用； S40、 对步骤S30中得到的前端应用包， 部署到服务端相应的目录下， 用于浏览器访问前 端应用的资源地址； S50、 前往当前 前端应用部署所在的目标服 务器进行 该前端应用的缓存策略配置； S60、 完成前端编码和构建、 后端部署应用以及后端配置缓存策略， 前往浏览器上对当 前应用进行正常访问。 2.根据权利要求1所述的一种解决前端应用缓存引起渲染异常的方法， 其特征在于， 步 骤S10中， 包括以下的步骤： S101、 对前端应用进行打包配置前， 通过vue ‑cli3.0创建项目， 使用Visual  Studio  Code进行代码编写的开发工具， 选择Vue为前端开发的技术栈， vue ‑cli3.0用于组成完整的 Vue项目核心构成， 用来对目标 前端应用进行 快速开发、 编译和构建； S102、 依据步骤S101中完成项目的开发工作， 前往目标工程的vue.config.js文件配置 filenameHashi ng属性为true； S103、 完成步骤S102中的配置， 执行打包命令后， 构 建打包前端应用输出的文件后面加 上的hash值； S104、 在所述的vue.co nfig.js文件上 添加时间戳， 确保文件的唯一 性。 3.根据权利要求1所述的一种解决前端应用缓存引起渲染异常的方法， 其特征在于， 步 骤S20中， 前往目标工程的入口文件index.html或者public下的模板index.html的head上 添加缓存策略， 使该 策略对整个工程的html文件统一 生效。 4.根据权利要求3所述的一种解决前端应用缓存引起渲染异常的方法， 其特征在于， 前 端应用的缓存策略包括： S201、 配置<meta  http‑equiv＝"Expires"cont ent＝"0">用于设定网页的到期时间为 当前， 即下次使用需到服 务器上重新传输； S202、 配置<meta  http‑equiv＝"Pragma"content＝"no ‑cache">用于设定禁止浏览器 从本地机的缓存中调阅页面内容， 设定后一 旦离开网页就无法从Cac he中再调出； S203、 配置<meta  http‑equiv＝"cache ‑control"content＝"no ‑cache,no ‑store, must‑revalidate">用于清除缓存， 再访问时需要重新下 载。 5.根据权利要求1所述的一种解决前端应用缓存引起渲染异常的方法， 其特征在于， 步 骤S30中， 包括以下内容： 前往目标前端工程所在的终端， 执行npm  run build命令打包构建前端应用， 构建输出 的前端应用包， 资源带有当前时间戳和 hash值的后缀， 得到的前端应用资源文件都是唯一 的， 该前端应用包， 用于 部署到服 务端， 提供 给浏览器访问。 6.根据权利要求1所述的一种解决前端应用缓存引起渲染异常的方法， 其特征在于， 步 骤S50中， 包括以下的步骤：权　利　要　求　书 1/2 页 2 CN 114968397 A 2S501、 前往前端应用部署的服务端， 前往Nginx文件配置服务端对当前前端应用的所有 html的缓存策略进行配置， 用于解决服 务器自身存在的html缓存问题； S502、 对Nginx文件进行配置， 配置add_header  Cache‑Control no‑cache， 用于放开缓 存； S503、 对Nginx文件进行配置， 配置ad d_header  Cache‑Control private； S504、 对Nginx文件进行配置， 配置add_header  Cache‑Control no‑store， 设置不仅不 能缓存,连临时文件夹中不能暂存该资源； S505、 对所述的Ngi nx文件进行配置， 配置只针对忽略目录下的所有html缓存； S506、 通过步骤S501 ‑S505， 忽略目标前端应用所在的目录下所有html 的文件缓存， 其 他文件不影响， html会根据哈斯值， 访 问对应的js、 css资源， 若js、 css在浏览器上已有资 源， 可以用缓存， 如果没有， 再 下载。 7.根据权利要求1所述的一种解决前端应用缓存引起渲染异常的方法， 其特征在于， 步 骤S60中， 浏览器上对当前应用进行正常访问包括以下的步骤： S601、 浏览器加载目标前端应用， 每次加载该前端应用的入口文件index.html都会从 远程服务端去获取； S602、 当前端应用有版本更新时， 构 建打包输出的资源文件名已经换了hash后缀， 当前 的app.js、 styles.js\chu nk‑libs.js文件都有hash， 此时浏览器会 根据新的index.html去 渲染页面， 同时会需要用到新的ap p.js、 styles.js\c hunk‑libs.js文件； S603、 浏览器检测不到缓存里有该js文件， 此 时会前往目标服务器下载该文件， 此 时目 标服务器目录下 的进行缓存策略的配置， 服务端也不会从缓存中取， 确保了访问的资源是 最新的； S604、 其他所需的cs s、 js、 图片资源文件也是类似的处 理， 确保了资源最 新； S605、 修改代码， 重新构建并部署新版本的前端应用到目标服务器上， 前往浏览器进行 访问， 实现正常访问和正常显示， 不再出现因缓存影响造成的页面异常问题， 也不需要手动 清除浏览器缓存。权　利　要　求　书 2/2 页 3 CN 114968397 A 3