(2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月11日)

  今天晚上,前端组的小伙伴问我说能不能帮忙看看他的电脑为什么在安装了browser-sync插件以后,正常启动服务以后却无法通过手机访问,经过简单的排查,发现竟然是由VMnet虚拟网卡引起的网络故障,遂记录下来。也正好把整个browser-sync插件的安装过程说一下。

  1.部署好git环境以及Node.js的安装,这个非常简单,在此就不多做解释了。

  2. 登录 http://www.browsersync.cn 网站,按照安装提示进行安装。

npm install -g browser-sync

在安装的过程中还发现一些你们都懂的原因连不上npm服务器,随改用淘宝的镜像站点,修改链接http://cnodejs.org/topic/4f9904f9407edba21468f31e

  3. 在某个英文目录下建立起一个文件夹,作为放置待响应式测试的站点的根目录,注意这里的路径都不能有中文,由于是测试,我直接在桌面上建立一个test文件夹,进来以后运行命令。

npm install --save-dev browser-sync

 

  4. 下载网站上给的同步测试包,解压缩,进入下一级目录。

 

  5.运行命令,这个命令的意思是监听本目录下所有文件。

browser-sync start --server -files "*"

  6. 若是正常情况下,就会返回如下提示。

  小伙伴今晚在这里的返回提示是一个169.254.0.0/16的地址,这是一种叫做本地链路地址,用于当计算机没有插入网线时,网卡给自己临时自动分配的一个地址,而小伙伴当前使用的网络地址当然不会是这个,因此导致了问题。

  既然browser-sync服务器识别并应用到了这个地址,说明本机上至少是有一块网卡使用着这个地址,打开网络与共享中心 → 更改适配器设置 → 网卡,一张张网卡看过去,马上就发现了由于VMnet1使用了这个地址,因此browser-sync服务器就指示到这里来了,禁用掉这两个网卡,再重新跑一遍步骤5,手机上就能打开了。

  7.最后说说两个使用事项吧。
  (1) 手机端和电脑端一定要使用同一个网段,比如连接到同样一个wifi下面,若电脑端直接连接wifi,手机端用流量的话,在不做端口转发的前提下是不能正常使用的。
  (2) 有一个根文件夹作为监听的根目录,那么就可以在根目录下面根据需要监听文件了。

  Bug在宿舍重现不出来(:з」∠),估计应该只是个别电脑问题而已,小伙伴们若是碰到了可以稍微注意一下。

由VMnet引起的browser-sync故障解决方案的更多相关文章

  1. web页面实时刷新之browser sync

    web开发对实时刷新的需求 在刚开始学习前端时每次修改文件内容后都需要手工刷新下浏览器来看效果,做的次数多了就特别难受,有时仅仅修改了一个字母都需要刷新下页面查看 之后接触到编写边看的集成IDE,文件 ...

  2. Linux系统无法启动故障解决方案

    Linux系统无法启动故障解决方案 2011-09-27 09:42 佚名 比特网 我要评论(0) 字号:T | T 不管你多么喜爱你的Linux系统机器,有时候你都必须恢复你的系统.是的,即使一台L ...

  3. jquery 1.9版本后不在支持browser 方法的解决方案

    今天对jquery 进行升级,导致项目出错,原来在1.9版本之后 jquery 不支持browser 方法了.  官方建议的又不好用,所以我所jquery 原来的代码摘除来,又扩展回去. //解决jq ...

  4. cacti 安装与 与不能显示图像故障解决方案

    on debian 7&8 apt-get install snmp snmpd apt-get install cacti cacti-spine apt-get install moreu ...

  5. 几种常见的Windows 服务器无法联网/无法连接远程桌面等故障解决方案

    SEO优化扫我一.服务器无法连接远程桌面 1.Ping不通IP,网站打不开,不可以远程连接.可能是服务器死机了,或者网络有问题,请尝试Web重启服务器或联系服务商确认. 2.Ping正常,网站可以打开 ...

  6. ssh远程登录故障解决方案

    问题描述: xshell远程连接服务器连接不上,如下图所示: 故障排除: . 首先查看自己系统的防火墙是否关闭,没有关闭的话关闭一下. # centos 7中关闭防火墙命令: systemctl st ...

  7. MySQL 误删用户故障解决方案

    目录 "误删"所有用户 解决方式一: 停止数据库 跳过 授权表 和 网络启动(重要) 插入新的用户 重启启动数据库 解决方式二: 停止数据库 跳过 授权表 和 网络启动(重要) 授 ...

  8. OS X升级到10.10使用后pod故障解决方案出现

    最新的mac 10.10强大的好奇心,所以,你的系统升级到10.10.结果表明,使用pod出现下述问题: /System/Library/Frameworks/Ruby.framework/Versi ...

  9. 转载:Linux服务器Cache占用过多内存导致系统内存不足最终java应用程序崩溃解决方案

    原文链接: https://blog.csdn.net/u014740338/article/details/66975550 问题描述 Linux内存使用量超过阈值,使得Java应用程序无可用内存, ...

随机推荐

  1. .Net Core 从MySql数据库生成实体类 Entity Model

    1.首先建测试库 2.新建一个.Net Core 项目 3. cd到项目里面执行命令: dotnet add package MySql.Data.EntityFrameworkCore 4.继续执行 ...

  2. Linux 系统版本查询命令

    .# uname -a (Linux查看版本当前操作系统内核信息) .# cat /proc/version (Linux查看当前操作系统版本信息) .# cat /etc/issue 或 cat / ...

  3. 【学术篇】一些水的不行的dp

    最近做了几道非常水非常水的dp...... 之后刷的一些水dp也会写在这里...... 此篇题目难度不递增!!! Emmmm....... 1.luogu1043数字游戏 以前看过这个题几遍,没做这个 ...

  4. Leetcode207. Course Schedule课程表

    现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹配来表示他们: [0,1] 给定课程总量以及它 ...

  5. Java学习 时间类 Period类与Duration类 / LocalDate类与Instant类 用法详解

    前言 java 8 中引入的两个与日期相关的新类:Period 和 Duration.两个类看表示时间量或两个日期之间的差,两者之间的差异为:Period基于日期值,而Duration基于时间值.他们 ...

  6. tomcat的webapps下面包含五个自带的项目

    1.docs tomcat的介绍和操作文档等 2.examples 小程序示例 3.host-manager host管理 4.manager(重点) 进行 Server Status 和 Appli ...

  7. Java怎样获取字符串最后出现的位置

    lastIndexOf();表示获取字符串最后出现的位置,倒数的位置 @Test /** * lastIndexOf();//获取字符串最后出现的位置,倒数的位置 * */ public void f ...

  8. 【JZOJ6346】ZYB和售货机

    description analysis 其实这个连出来的东西叫基环内向树 先考虑很多森林的情况,也就是树根连回自己 明显树根物品是可以被取完的,那么买树根的价钱要是儿子中价钱最小的那个 或者把那个叫 ...

  9. 阿里云 Aliplayer高级功能介绍(三):多字幕

    基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式 ...

  10. 阿里云宣布 Serverless 容器服务 弹性容器实例 ECI 正式商业化

    摘要: 阿里云宣布弹性容器实例 ECI(Elastic Container Instance)正式商业化,ECI 是阿里云践行普惠的云计算理念,将 Serverless 和 Container 技术结 ...