访问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. day06:三级菜单练习0218

    #1:省份数列:data = { "北京":{ "昌平":{ "沙河":["oldboy","电信" ...

  2. Mac node.js express-generator脚手架安装

    前言 由于本人在学习NodeJs的express框架时,在Mac电脑上安装express遇到了一个深痛的坑点,特写此文来记录.该坑点的解决方案我在国内的度娘没有找到,问别人也没有方案,最后通过goog ...

  3. Spring Beans 自动装配 简介

    Beans 自动装配 Spring 容器可以在不使用<constructor-arg>和<property> 元素的情况下自动装配相互协作的 bean 之间的关系,这有助于减少 ...

  4. POJ2758 Checking the Text

    题目链接:https://vjudge.net/problem/POJ-2758 题目大意: 先给出一串原始字符串,在此基础上执行两种操作: 1.在第 p 个字符前添加字符 ch,如果 p 比现字符串 ...

  5. CICD：Jenkins入门和使用

    最近,我们使用的开发服务器被回收了,换了一台新的服务器,CI/CD平台需要重新搭建. 我的运维能力一直薄弱,所以借此机会学习了一番如何使用Jenkins进行持续集成开发和部署,实践并踩了一些坑,在此记 ...

  6. Java并发编程入门（二）

    1.竞态条件 1.1 定义 当某个计算的正确性取决于多个线程的交替执行时序时,就会发生竞态条件.换句话说,正确的结果要取决于运气. 最常见的竞态条件类型:先检查后执行(Check-Then-Act)操 ...

  7. 博客管理与文章发布系统-第三方模块及其用法Part1

    写个帖子记录一下自己写的第一个express完整项目. 所需第三方模块及其用法. 一.先把所需文件和准备工作写一下 写项目前的准备 1.创建所需文件夹 public 静态资源 model 数据库操作 ...

  8. 最全的ASCII码对照表

    转自https://blog.csdn.net/jinduozhao/article/details/75398793 十进制代码 十六进制代码 MCS 字符或缩写 DEC 多国字符名 ASCII 控 ...

  9. 当.Net成为大厂门槛代码小白该何去何从？

    掌握.Net已成为进入大厂的通行牌.越来越多的互联网软件公司开始使用.Net Core,根据去年数据显示腾讯.网易.顺丰.携程.中通.申通.同程艺龙.微医.233网校.问卷星.金蝶等关键业务已经在往. ...

  10. 关于pytest使用allure生成报告时，报一堆警告和缺少XX模块

    因为最新的pytest 支持*.josn的用例报告,卸载旧的模块使用新的即可: 需要移除旧模块:pip uninstall pytest-allure-adaptor, 并安装:pip install ...