真机测试移动端项目---在手机上访问我们的移动端网页

最近在做毕业设计，做的是一个移动端的项目，由于还没有买服务器这些东西，纯前端，就还没有去配置微信公众号的接口。可是一般浏览器看到的手机界面和真机上显示还是有差别的，故而去寻找了一个真机测试的方式。（目前认为最方便的方式）

具体步骤是：

1、确保电脑和手机在同一个局域网（三个方式）：

    1）、手机开热点，电脑连接；

    2）、电脑开热点，手机连接；

   3）、电脑手机连接同一个热点；

2、查看电脑手机局域网的IP地址

Windows找到命令行，输入ipconfig，Linux输入ifconfig：我这儿以window为例

输入：ipconfig

找到IP地址：（我这儿是手机和电脑连的同一个热点）故而找到WLAN的IPv4地址：192.168.x.x

3、修改项目中的配置,将host修改为上面的IP

4、重启项目 ： npm run serve

5、测试

电脑浏览器输入http://+刚修改的ip+端口，查看是否正常打开项目。

正常后手机端也输入：http://+刚修改的ip+端口，查看是否打开项目。（这时候很有可能打不开，那就看下面一步吧）

6、关闭防火墙

正常情况下，电脑防火墙会拦截我们的访问，所以就先关闭电脑防火墙 。（为了电脑安全，测试了项目后记得把防火墙打开哦。^-^!）

  1）、打开控制面板，进入系统与安全

 

关闭了后，我们的项目就可以在手机上访问啦。