app内嵌vue单页面应用的一些坑

Posted 2020-12-17 爱吃橘子哇咔咔

　　写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目，看看有哪些坑！！！

1、白屏

　　项目第一次上线正常

　　项目第二次上线，20多个用户反馈白屏（没见过这世面，心里慌的不行！！！），一时定位不到问题，只好回滚了

　　然后费劲查了查，发现第二次打包之后的app.js文件出现了includes（es7新增api）方法，但是第一次没有，这个超级坑，其实测试阶段发现了includes方法兼容性有问题，但是当时是自己用了这个方法，知道有问题之后就用了别的方法替换，没想到第二次打包之后的app.js自己包含了这个方法（至今没搞懂为啥）

　　解决办法就是babel-polyfill配置，具体怎么配置上网查查就行，然后以后开发项目尽量考虑周全点，这就是我没啥经验的问题了

2、还是白屏

　　可能是某个资源加载失败，因为线上出现了一次一个css资源返回301状态，然后浏览器访问这个资源就会直接跳转到我们的网站首页，然后定位到问题之后，立马找op恢复了

　　这里如果是css资源加载失败的话，接到的反馈都是android用户样式丢失，ios用户直接白屏

3、怎么还是白屏

　　承接第二个白屏，op恢复线上css资源后，ios用户因为缓存比较严重（解决办法在第4点），所以只能清理缓存，就能恢复正常

4、ios缓存

　　因为是单页面应用，部署的时候特别坑，op把页面资源和静态资源都放在cdn下了，然后ios会直接缓存html，之后再上线，html还是旧的，里面的资源也是旧的，导致进去一个页面跳转另一个页面的时候，请求的js是老得资源，但是服务器上已经没有了哎，然后就会发现  嗯？为什么按钮点击都没反应??   这个问题也是坑了我好久

　　解决办法，后来把页面资源和静态资源域名分开了，只有静态资源走cdn，页面资源不缓存（我写这个的时候，刚上线，还没法验证??，不行的话，我再回来改改）

 

解决这些问题的时候，中间插入了别的项目，然后焦虑的度过了两周，自己也第一次收到了小50个的jira反馈（基本这两周的jira反馈有一大半是我的??），但是通过这次之后，还是很有收获的，只能说没有压力没有成长吧～