把现有的项目打一个离线包出来~踩坑

304 阅读5分钟

Ps:打包一个离线包给销售,让销售拿去推广,数据需要用我们最新的数据。

一开始接到这个需求,快速的就有了一个解决方案,可以缓存所有接口的请求数据,然后就可以了做成离线的了。

真是想法很天真,开始一路一个坑。

实施:axios请求接口在响应数据时,用一个对象把所有请求接口的用户账号和入参以及请求方法作为对象的key,响应的内容作为value,然后采集数据,当这个数据采集好后,用ctrl+m将数据保存成json下来。 当数据采集下来后,拷贝到项目内作为静态数据,在演示的项目中改变请求策略,这个时候不再去请求真正的接口了,而是请求静态数据,这样就可以做到离线包演示了。

坑1:前端项目想要离线运行,必须起一个静态资源服务器找了几个(https-server)就只有 startserver 可以正常跑起来

npm i -g startserver

当全局安装这个库后,只要在你想要起的静态资源工程下进行cmd命令 startserver

坑2:采集的数据太大了,webpack一编译,机子就宕机。

问题定位:webpack在打包的时,默认只要超过500kb就会提示有js包过大,默认内存有限,可以使用设置默认内存变大一点打包,但是当数据采集超过一定大小后,webapck直接报内存真的不够。

解决方案:不再使用webpack打包数据,而是在打包好的工程下写一个cashed.js将采集的所有采集来的数据放到这个文件中,因为可以采集无数个json数据我用node写了一个一键合并json数据的工具,详细代码请见->地址,然后在index.html中直接引用cashed.js,并在这里面声明一个全局的变量来存贮采集来的数据。

坑3:JSON.stringify转成字符串时在startserver下key的顺序是不固定的

问题定位:测试了一下在本地和nginx打包后的工程下,axios请求入参时将入参转成字符串时是这样的{a:1,b:2},

而在startserver工程下axios请求的入参有些接口变成了{b:2,a:1},这是一个巨坑啊~

解决方案:在静态资源工程下改变获取采集数据策略,将入参转成字符串后在通过字符串排序一下做对比,如果对比成功,就可以取对应key中的value,作为接口返回值。

坑4:采集的数据遇到了JSON.stringify会把 value 值为 undefined 的过滤掉

问题定位:JSON.stringify({a: undefined}),输出结果是{} 坑坑坑(其实是自己知识不够,翻了一下MDN文档人家说了 undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略 )~

解决方案:避免出现对象value为undefined现象

坑5:对于接口入参格式为 FormData 的数据JSON.stringify并没有卵用(文件上传)

问题定位:在axios真正请求前,捕获参数时发现接口请求是FormData格式时,拿不到FormData请求的入参字段,但在请求有返回值的时候,就可以拿到FormData当时的入参字段了。目前还不清楚为什么会这样,有知道的大佬可以解答下吗?
解决方案:可以用forEach将FormData内的所有字段遍历出来push到一个空数组中,用map直接返回却不行,这边还有一个问题就是FormData中有一个是上传文件的字段,这个时候静态资源工程需要定位出是否是历史上传过的文件,这边我采用的策略是文件最后修改的时间戳来匹配是否是同一份文件,我看了文件File内的字段并没有一个唯一值来定位,这边我想要的是不管上传多少次同一个文件它应该有一个唯一值是不会变的(如果有大佬知道,请帮解答疑惑),这样FormData格式的入参就可以转字符串了。

坑6:对于接口每次都拿系统的实时时间时(业务流程)~束手无策

问题定位:有些接口在请求入参时,拿的是当前系统的时间,因为我匹配采集数据的策略是必须命中所有入参字段的key才能把数据返回出来,然后如果入参的值是动态的,那就完全无法处理了。希望有大佬可以给个解决方案。

坑7:对于内嵌iframe的页面(客户综合查询)~束手无策

问题定位:工程底下还内嵌了第三方iframe,和内嵌其他子工程的页面,这个时候无法采集到内嵌的数据

坑8:流程如果有后退,进程id值会变更,导致之前采集的数据有问题。

问题定位:接口入参的值竟然会变,这个真的是无能为力了,业务复杂~

坑9:页面查看数据采集后显示不出来,组件时序写得有问题

问题定位:工程bug,不同小伙伴写的代码,哎,心态要放平。

解决方案:直接堵住这个bug,或直接修复它,或者叫写这个bug的小伙伴给他提缺陷。

坑10:相关链接显示数据不对

问题定位:业务问题,还未定位。

坑11:工程缺陷修复后,本地项目滞后问题

解决方案:等缺陷修复.及时同步代码。

坑12:入参采集数据会出现特殊符号,导致采集的key找不到

问题定位:入参的字符中出现了js等关键字

解决方案:在静态资源工程中,匹配策略再加一层,去除特殊符号。

还有N坑在路上,加油,92满上,冲冲冲。。。