Windows 10系统下如何将Browser Sync连接到自行开发的网页？

前置验证 #

首先确认你已经安装了Windows版Node.js，安装完成后按下Win+R输入cmd打开命令提示符，依次执行以下命令，输出版本号即代表环境正常：

• node -v
• npm -v

步骤1：全局安装browser-sync #

在命令提示符中执行以下命令：

npm install -g browser-sync

安装完成后执行browser-sync --version，输出版本号即为安装成功。

步骤2：连接到开发网页 #

根据你的开发场景选择对应操作即可：

场景1：纯静态网页项目（无后端服务，直接打开本地HTML文件开发） #

• 切换到你的项目根目录，比如你的项目存放在D:\work\my-web，依次执行：

  D:
  cd work\my-web
  

• 执行启动命令：

  browser-sync start --server --files "**/*.html, **/*.css, **/*.js"
  

  其中--files后配置的是需要监听的文件类型，修改对应文件时浏览器会自动刷新，你可以根据自己的技术栈增加*.vue、*.scss等匹配规则。
• 命令执行完成后，默认访问http://localhost:3000即可打开你的开发页面，所有文件修改会自动同步到浏览器。

场景2：已有本地后端服务（比如用PHP、Python等启动了端口为8080的本地服务） #

• 同样先切换到项目根目录
• 执行代理模式启动命令，将参数替换为你自己的本地服务地址即可：

  browser-sync start --proxy "http://127.0.0.1:8080" --files "**/*.html, **/*.css, **/*.js"
  

• 启动后访问http://localhost:3000即可，browser-sync会代理你原有的后端服务，同时支持文件修改自动刷新。

常见问题排查 #

• 若提示browser-sync命令不存在，可直接用npx browser-sync替代全局命令执行，或者手动将npm全局安装路径添加到Windows系统环境变量
• 若文件修改后浏览器不自动刷新，检查--files后的匹配规则是否覆盖了你修改的文件路径
• 防火墙弹出访问权限提示时选择允许，否则局域网内其他设备无法访问同步地址。

内容的提问来源于stack exchange，提问作者Mohammed Muamar