访问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. kubernetes flannel pod CrashLoopBackoff解决

    背景 某环境客户部署了一个kubernetes集群,发现flannel的pod一直重启,始终处于CrashLoopBackOff状态. 排查 对于始终CrashLoopBackOff的pod,一般是应 ...

  2. Spring @Required 注释

    @Required 注释应用于 bean 属性的 setter 方法,它表明受影响的 bean 属性在配置时必须放在 XML 配置文件中,否则容器就会抛出一个BeanInitializationExc ...

  3. MySQL（5）— 常用函数

    五.MySQL常用函数 可参考[官网文档]https://dev.mysql.com/doc/refman/8.0/en/ 5-1.基本函数 数学运算: -- 数学运算 SELECT ABS(-8) ...

  4. Vue接入百度地图显示及相关操作

    Vue接入百度地图的API 首先你要有一个百度地图的key就是CK 申请网址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getke ...

  5. DevOps生命周期，你想知道的全都在这里了！

    在大多数情况下,软件应用程序开发由于其规范性和复杂性而变得很耗时. 为了在短时间内交付高质量应用程序,软件开发人员正在遵循一套通用的实践,称为DevOps生命周期. 那么,DevOps在软件应用程序开 ...

  6. 1.Redis介绍和使用场景

    (1)持久化数据库的缺点 平常我们使用的关系型数据库有Mysql.Oracle以及SqlServer等,在开发的过程中,数据通常都是通过Web提供的数据库驱动来链接数据库进行增删改查. 那么,我们日常 ...

  7. Linux题目

    1.删除某目录下所有文件,只保留指定文件. 例:假设/abc文件夹下有a1.a2....a10文件,保留a5和a6文件,其他全部删除 [root@localhost abc]# touch a{1.. ...

  8. Telegraf和Grafana监控多平台上的SQL Server

    问题 SQL Server在很多企业中部署在多个平台上(Windows,Linux和Container),需要一种能支持多平台的解决方案用于收集和展示相关的监控指标. 我选择企业中比较流行的监控展示工 ...

  9. Chisel3 - model - DefWire, Reg, Memory, Prim

    https://mp.weixin.qq.com/s/KkkqvekWHG6yrqwHUECRIw   介绍如何定义Wire/Reg/Memory/Prim.   1. DefWire   Wire( ...

  10. MD5安全吗？

    MD5的破解方法目前分为两类:一类为彩虹表破解:一类为专业的MD5破解站点. 1.彩虹表 彩虹表是一个庞大的.针对各种可能的字母组合预先计算好的哈希值的集合.彩虹表不仅针对MD5算法,主流的算法都有对 ...