Browser-sync in mobile while local development

僤鯓⒐⒋嵵緔 提交于 2019-12-21 02:41:39

问题


How can I view my local dev website in my phone using gulp Browser-sync? I type localhost:3000 in my phones browser but it won't load


回答1:


When you run gulp in your terminal you should see :

    [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

What it means is that your local URL is localhost at port 3000. For external users it will be the external IP [ not the UI one ]. To access from your phone you need to enter the External IP along with its port in your phone's browser.

You can view all your browser-sync settings by visiting the UI IP.

Note : For the external link to work on your phone, your phone and computer should be on the same Wi-Fi Network, only then it will work.




回答2:


I know this is old, but the above option didn't work for me, and I'm running windows 10. I eventually found a solution using the tunnel option which is completely hassle-free.

For instance, setting as an option tunnel: true will generate a random public URL each time you run BrowserSync: e.g. http://randomstring23232.localtunnel.me

However, you can set a preferred tunnel name by passing it as a string to the tunnel option, i.e. tunnel: 'preferredtunnelname', which will reproduce: https://preferredtunnelname.localtunnel.me

References here: https://github.com/BrowserSync/browser-sync/issues/390 and https://browsersync.io/docs/options/#option-tunnel




回答3:


Thanks to @Kwesi for sharing above. In my case, setting tunnel:true alone didn't work until I also added online:true. Here's my sample code - worked fine on both computer and mobile device.

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


来源:https://stackoverflow.com/questions/34739846/browser-sync-in-mobile-while-local-development

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!