锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识页面单页面单页面应用

知识的价值不在于占有，而在于使用。这篇文章主要讲述app内嵌vue单页面应用的一些坑相关的知识，希望能为你提供帮助。
写这篇文章的原因是想总结一下自己最近开发的一个内嵌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，页面资源不缓存（我写这个的时候，刚上线，还没法验证??，不行的话，我再回来改改）
 
【app内嵌vue单页面应用的一些坑】解决这些问题的时候，中间插入了别的项目，然后焦虑的度过了两周，自己也第一次收到了小50个的jira反馈（基本这两周的jira反馈有一大半是我的??），但是通过这次之后，还是很有收获的，只能说没有压力没有成长吧～

    推荐阅读


    上一篇：@RequestMapping 注解有什么用（）

    下一篇：uniApp实现在线预览office文件，web端也可以。---web-view组件