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

访问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 需要优化按需加载,否则在外网网速很慢的情况下访问的时间需要很久

猜你喜欢

转载自www.cnblogs.com/muzhifei/p/jc.html