移动浏览器同步本地开发

Question

如何使用gulp Browser-sync查看手机中的本地开发网站？我在手机浏览器中键入localhost：3000，但不会加载

Answer 1

当您在终端中运行gulp时，您应该看到：

    [BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.10.81:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.10.81:3001

这意味着您的本地URL是端口3000的localhost。对于外部用户，它将是外部IP [不是UI之一]。要从手机访问，您需要在手机浏览器中输入外部IP及其端口。

您可以通过访问UI IP来查看所有浏览器同步设置。

注意：要使外部链接在手机上运行，​​您的手机和计算机应位于同一Wi-Fi网络上，然后才能运行。

Answer 2

我知道这是旧的，但上面的选项对我不起作用，我正在运行Windows 10.我最终找到了一个使用tunnel选项的解决方案，这是完全无忧无虑的。

例如，设置为选项tunnel：true将在每次运行BrowserSync时生成随机公共URL：例如http://randomstring23232.localtunnel.me

但是，您可以通过将其作为字符串传递给隧道选项来设置首选隧道名称，即tunnel：'preferredtunnelname'，它将重现：https://preferredtunnelname.localtunnel.me

参考文献：https://github.com/BrowserSync/browser-sync/issues/390和https://browsersync.io/docs/options/#option-tunnel

Answer 3

感谢@Kwesi上面的分享。在我的情况下，设置tunnel：true单独没有工作，直到我也在线添加：true。这是我的示例代码 - 在计算机和移动设备上都运行良好。

browserSync.init({
    server: {
      baseDir: "app"
    },
    online: true,
    tunnel: true,
    logLevel: "debug"
  });