如何在手机上访问电脑web项目进行真机调试

有时候想在自己手机上预览一下开发中网页的效果，就需要使用真机调试，用chrome自带的调试功能是很好的方法，但有时候需要适配一些小众的手机屏幕，这时用chrome就不方便了，下面说一下如何在手机上进行网页预览。

1.手机和电脑连同一个WiFi

注意，这里的WiFi不是指手机连上电脑的热点，而是两者连进别的局域网，比如公司或者家里的WIFI。

2.打开电脑命令行查看ip地址

1. win+r，输入cmd，再输入ipconfig，找到“无线局域网适配器 WLAN”一栏，记下ipv4地址。（注意一定是“无线局域网适配器 WLAN”一栏）。
2. 电脑上启动web项目。
3. 关闭电脑防火墙。
4. 手机浏览器输入http:// +ipv4 +端口号

嗯，如果根据上面的步骤你成功访问到项目的话，那确实很幸运，上面是网上流行的做法，但博主一直都是不幸的人，下面说说博主遇到的坑和解决的方法。

1.端口号被占用

一般web项目是在8080端口启用，但有时候如果8080被占用了，就会转到别的端口，如果你想就用8080端口，那就需要先把8080端口的服务先暂停掉。

1. 命令行输入netstat -aon|findstr "8080"。
2. 记下最右侧的PID（一个数值），比如是3344。
3. taskkill ／pid：3344。
4. 重新启动web项目。

2.关闭防火墙不起作用

emmm，老实说，博主不大懂防火墙的相关原理，如果你遇到这个可以这样设置一下，希望能起作用。

1. 打开windows安全中心。（穷人买不起mac）点击公用网络再下面一点的高级设置。
2. 在弹出界面点击操作，选择新建入站规则。选择“端口”，下一步，选择“TCP”，“特定本地端口”，输入8080，下一步，选择“允许链接”，下一步，默认的三个都选，下一步，名称和描述随意，点击完成。

emmm，如果这时候还是不能访问，那也许就不是防火墙的锅了。

3.不知道神马错误

如果你走到这一步，那恭喜你已经成为和博主一样不幸的人。但神依然给你留了希望，可以试试最后一个方法。如果你使用vue-cli脚手架，可以这么处理（其他同理）

打开根目录下的config文件夹，打开index.js，

找到dev的host，将localhost改为'0.0.0.0'，然后重启项目。

这时你在电脑点击命令行的地址无法访问到项目，在浏览器地址栏把0.0.0.0改为localhost就可以了，但我们终极目标是手机预览，这时只需要在手机上的浏览器地址栏输入

http:// + ipv4 + 端口号 就可以访问了。

结语：如果走到这，还是不行，那请回头看看哪一步没做对，可能是你ipv4输错了，也可能端口你找错了，如果都不是，那你就很有幸成为比博主更不幸的人了，所以还是放弃吧。

（ps：一定要关闭电脑防火墙，全关裸奔那种，关闭一切电脑杀毒软件，当然裸奔完记得把衣服穿上避免着凉，把防火墙都还原为打开状态。）