访问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. 日志文件的配置----【logback-spring.xml】

    一.引入相关包 <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-c ...

  2. Vue 使用typescript, 优雅的调用swagger API

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学. 前端如何优雅的调用呢? ...

  3. HDU6440 Dream

    题目链接:https://vjudge.net/problem/HDU-6440 知识点: 构造.费马小定理 题目大意: 给定一个素数 $p$,要求定义一个加法运算表和一个乘法运算表,尺寸都为 $p ...

  4. 开箱即用,Knative 给您极致的容器 Serverless 体验

    作者 | 冬岛  阿里巴巴技术专家 导读:托管 Knative 开箱即用,您不需要为这些常驻实例付出任何成本.结合 SLB 云产品提供 Gateway 的能力以及基于突发性能型实例的保留规格功能,极大 ...

  5. 基于postman测试接口(整套接口测试)

    基于postman测试接口(整套接口测试) 可以解决的问题 几百个接口人工测试接口过于繁杂 大多测试无法使用请求结果当参数 可以使用随机参数 支持swagger信息导入 随账号持久化保存数据 对集合一 ...

  6. PHP常量的定义和用法

    我们通常把不经常变的值定义成常量,常量一般用全部大写来表示,前面不加美元符号,也可减少团队开发的出错.那么define和const有什么区别呢? 1.const是一个语言结构:而define是一个函数 ...

  7. java导入web项目httpservlet报错

    于是开始了,调错之路. 解决方法:鼠标右击项目工程——>Build Path——>点击comfigure Build Path进入----->选择java Bulid Path--- ...

  8. UIAutomator2的API文档(二)

    1.设备屏幕事件 熄灭屏幕d.screen_off() 唤醒屏幕d.screen_on() 屏蔽状态d.info.get('screenOn')#返回True or False 解锁屏幕d.unloc ...

  9. Qt版本中国象棋开发(一)

    开发目的:实现象棋人机对战简单AI,网络对战,移植到android中. 开发平台:windows10 + Qt5.4 for android 开发语言:C++ 开发过程:1.棋盘绘制: 方法一:重写  ...

  10. Android_存储访问框架SAF

    概念 存储访问框架---Storage Access Framework (SAF),这是在Android4.4(API level 19)之后引入的. 借助 SAF,用户可轻松在其所有首选文档存储提 ...