本地开发时移动设备中的浏览器同步

Question

如何使用 gulp 浏览器同步在我的 phone 中查看我的本地开发网站？我在 phone 的浏览器中输入 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 那个]。要从您的 phone 访问，您需要在 phone 的浏览器中输入外部 IP 及其端口。

您可以通过访问 UI IP 查看所有 browser-sync 设置。

注意：要使外部 link 在您的 phone 上工作，您的 phone 和计算机应该在同一个 Wi-Fi 网络上，只有这样它才会起作用。

Answer 2

我知道这是旧的，但上面的选项对我不起作用，我运行宁 windows 10。我最终找到了使用 tunnel 完全没有麻烦的选项。

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

但是，您可以通过将首选隧道名称作为字符串传递给隧道选项来设置首选隧道名称，即 隧道：'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 不起作用，直到我还添加了 online:true。这是我的示例代码 - 在计算机和移动设备上都运行良好。

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

本地开发时移动设备中的浏览器同步

Browser-sync in mobile while local development

gulp

browser-sync