移动浏览器同步本地开发

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