记录一次vue 访问空白的排错

Posted 2020-11-29 muzhifei

访问vue项目页面空白

---

场景

---

内网访问访问url很快就可以打开页面，外网访问一片浏览器端一片空白

排查思路

• [x] 由于不熟悉vue 先看了nginx的配置，以为是nginx的配置导致的
• [x] 百度查询了vue 反向代理空白关键字看了一些感觉场景不对
• [x] F12查看资源的加载，也是看到了很多资源收到被加载了，但是浏览器还是不显示首页资源，这个就纳闷了，不明白，不理解 为什么明明浏览器已经加载到资源了，但是不去解析显示呢’
• [x] 随便点进去有一个，在timebe 显示为一串英文大概意思是，内容还在下载中，但是我看单个资源已经下载了，为什么要有这个提示呢
• [x] 页面放着，继续搜索查询关键字，vue项目已经加载js到 页面空白，还是没有合适的
• [x] 后来看见F12的网络传输内容是45M，完成时间是7.2min 页面也被显示了，对比了内网的访问速度，4.5s 意识到是网络速度导致的差异了，顿时怀疑是vue的读取有问题了，咨询了一个资深前端，得到的反馈是，vue是可以做到按需加载的，不需要在每次请求都把全部资源拿到
• [x] 问题解决，前端vue 需要优化按需加载，否则在外网网速很慢的情况下访问的时间需要很久