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

记录一次vue 访问空白的排错的更多相关文章

  1. 启动Jenkins后无法访问，如何排错

    做IT工作,使用各种工具的时候,遇到错误都是一堆英文,对于英语不好的人,看到报错可能就会心烦,我刚开始就是这种状态.后来,遇到问题,首先复制报错信息到百度上搜索,没有人请教的时候,你不能坐等问题自己解 ...

  2. 通过cookie记录，设置页面访问的跳转页

    通过cookie记录,设置页面访问的跳转页 转载自:http://blog.csdn.net/yixiao_naihe/article/details/26679515. 目的: 1.访问fm.htm ...

  3. 4.VUE前端框架学习记录四：Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  4. 3.VUE前端框架学习记录三：Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  5. 记录 nginx和php安装完后的URL重写，访问空白和隐藏index.php文件的操作方法

    sudo cd /etc/nginx/; sudo vi fastcgi_params; 1.URL重写 如果你的url参数不是用?xxx传递,而是自定义的,比如用/xx/xx/xx的方式传递,那么在 ...

  6. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  7. 域名注册域名解析域名绑定 dns服务器解析 域名记录的添加 记录类型含义@ www 访问域名请求过程

    创建一个web应用,简言之就是访问一个域名,可以到达一个地方,这个地方就是你存放供别人查看的文件的地方 就像一条绳,从这头拉一下,可以拉出来另一头的东西 主要有两个部分: 域名 虚拟主机(空间) 1. ...

  8. Python3基础 __len__,__getitem__ 记录列表中元素访问的次数 定制不可变序列,下标字典

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. vue访问本地文件404

    用了vue cli3.0用axios调用本地json数据一直报404,找了半天郁闷,最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑.

随机推荐

  1. 关于MYSQL 和INNODB的逻辑关系图。最好的理解是一点点动手做，观察，记录，思考。

    每隔0.1秒就刷一次MYSQL文件的变化,并闪动标示出来,以观察SQL执行时,MYSQL的处理顺序. watch -n 0.1 -d stat /var/lib/mysql/ib_logfile0 / ...

  2. Spring 自动装配 byType

    自动装配 byType,这种模式由属性类型指定自动装配. Spring 容器看作 beans,在 XML 配置文件中 beans 的 autowire 属性设置为 byType.然后,如果它的 typ ...

  3. PAT-1060 Are They Equal （科学计数法）

    1060. Are They Equal  If a machine can save only 3 significant digits, the float numbers 12300 and 1 ...

  4. poj1780欧拉回路

    转载 #include<cstdio> #include<cstring> ; bool vis[N]; char ans[N]; int main() { int n; wh ...

  5. Gym101630A Archery Tournament

    题目链接:https://vjudge.net/problem/Gym-101630A 题目大意: 有\(n\)个操作,每次输入\(t\) \(x\) \(y\)\((t=1,2; -10^9 \le ...

  6. DOM变化后事件绑定失效

    第一个file在change时,是能够触发事件的,而第二插入的file则没有change事件.对于这个问题,有如下两种解决方法: 第一种是将绑定change事件封装成一个函数,在点击button按钮插 ...

  7. let面试题

    两次输出结构都是2 0 1

  8. jupyter 文件夹重命名

    jupyter 文件夹 如何重命名嘞?可能很多童鞋没找到吧,哈哈哈 我们先创建一个文件夹,如何创建嘞,往下看. 然后我们就可以看到, 如何重命名呐,注意注意了啊,选中你创建的文件夹,单击Rename. ...

  9. Order by 优化

    写在前面 文章涉及到的 customer 表来源于案例库 sakila,下载地址为 http://downloads.mysql.com/docs/sakila-db.zip MySQL 排序方式 通 ...

  10. scikit-learn中文文档

    http://sklearn.apachecn.org/cn/0.19.0/tutorial/statistical_inference/supervised_learning.html