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

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

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

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

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

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

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

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

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

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

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

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

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