跨设备

手机或者其他局域网设备访问dev-server

设置dev-server,使得在手机或者其他局域网设备访问到dev-server来实现跨设备测试开发

2018-05-09侠课岛    初级拔高       

前端/前端必修/webpack的dev-server使用 18     0     2461

这节我们来介绍如何实现手机和电脑同时预览,在配置了webpack的情况下,实现起来就很简单啦~主要用到的工具就是草料二维码生成器~ 

  • 使用上节我们讲解过的host属性,设置为你的ipv4地址例如'192.168.xx.xx',然后重启webpack-dev-server。重启的步骤是在命令行工具中连按两次ctrl+C来退出,然后重新执行npm run watch。 关于如何查询到本机的ip地址,打开你的命令行工具,输入ipconfig/all,按下回车,就可以找到你的本机地址啦~  

ip.png 

  • 确认你的手机和电脑已经连接在同一个局域网下面 

  • 打开草料二维码生成器,网址是:https://cli.im/  ,将dev-server生成的你的项目本地服务器地址粘贴到草料里面,然后点击生成二维码,如下图:  

caoliao.png

  • 打开手机相机扫描二维码,如果是微信内的页面的话,直接用微信扫一扫~你就可以在手机内预览项目啦~并且刷新也是实时的噢,只要保持开启这个页面,并且手机屏幕是亮起状态,你在电脑上所做的一切修改都会实时刷新在手机上~  

phone.png

关于webpack-dev-server就讲到这里啦,会用了吗? 

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

18

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?