Gulp 在移动的中同步浏览器,同时进行本地开发

sulc1iza  于 2022-12-08  发布在  Gulp
关注(0)|答案(3)|浏览(158)

我如何使用gulp浏览器同步在我的手机上查看我的本地开发网站?我在手机浏览器中输入localhost:3000,但它不会加载

woobm2wo

woobm2wo1#

在终端中运行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是localhost端口3000。对于外部用户,它将是外部IP [而不是UI IP]。要从您的手机访问,您需要在手机浏览器中输入外部IP沿着端口。
您可以通过访问UI IP查看所有浏览器同步设置。

注意:要使外部链接在您的手机上工作,您的手机和计算机应在同一个Wi-Fi网络上,只有这样才能工作。

f0brbegy

f0brbegy2#

我知道这是旧的,但上面的选项对我不起作用,我运行的是windows 10。我最终找到了一个使用tunnel选项的解决方案,这是完全免费的。
例如,将tunnel设置为选项:false每次运行BrowserSync时都会生成一个随机公共URL:例如http://randomstring23232.localtunnel.me
但是,您可以设置首选通道名称,方法是将其作为字符串传递给通道选项,即tunnel:'preferredtunnelname',它将重新生成:https://preferredtunnelname.localtunnel.me
References here: https://github.com/BrowserSync/browser-sync/issues/390 and https://browsersync.io/docs/options/#option-tunnel

wljmcqd8

wljmcqd83#

感谢@Kwesi分享以上内容。在我的例子中,单独设置tunnel:true是不起作用的,直到我添加了online:true。下面是我的示例代码-在计算机和移动的设备上都能正常工作。

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

相关问题