使用真机访问 本地开发的H5项目

使用真机访问 本地开发的H5项目

最近我leader让我维护一下我们官网（这也是我第一次接触H5项目），哼哧哼哧Ctrl+C,Ctrl + V了几天，总算是搞完了，但是我想用真实的手机测试一下UI，看看效果啥的。一时间有些不知所措，遂百度（有人说，哎呀，你发布测试环境测试一下啊，那也太麻烦了把，下面我准备介绍一个更简单的办法）

简单的说就是，在电脑上启一个服务，然后手机和电脑在同一局域网的情况下，可以直接通过IP+端口号访问

step1

启动你的项目，注意：url一定要是192.168.XX.XX + 端口号 ，不能是localhost:8080，0.0.0.0：9520，一般情况下只需要改变一些webpack的配置，粘一下我的，仅供参考

"scripts": {
    "dev": "webpack-dev-server --host 192.168.X.XX",
    ...
  },

注： ip 可以在cmd中输入 ipconfig/all 来查看（我是不是有点多嘴了）

step2

下载一个二维码插件，下载地址（需要能上google）：https://chrome.google.com/webstore/detail/pflgjjogbmmcmfhfcnlohagkablhbpmg

step3

在开发的页面，点击插件，就会生成一个二维码

step4

一定要保证手机和电脑是在同一个局域网下（连同一个wifi即可）,使用微信，或者夸克浏览器扫码就可以测试效果啦！