目前我们做的网站基本都需要有2个端：PC端和移动端，而移动端的效果是很难调试的，虽然谷歌浏览器提供了很好的切换到手机模式，但很多情况下还是需要在真机上进行调试，通常我们的做法：先将代码提交到测试服务器上，然后通过手机浏览器访问移动端页面，这样做虽然最后也能调试成功，但是毕竟中间增加了很多的步骤，使用起来不方便，下面介绍一种可以直接使用手机浏览器访问本地服务器，查看移动端的页面效果的方法。
准备
- 一部手机；
- 手机上面需要安装浏览器；
- 安装wamp集成环境的联网电脑电脑；
- 手机和电脑连接的是同一个WiFi，即保证网段一致。
设置步骤
1. 修改http.conf文件
在文件中查找下面这句话：
# Virtual hosts
#Include conf/extra/httpd-vhosts.conf #将这句话前面的#去掉
修改好之后保存
2. 修改httpd-vhosts.conf
在httpd-vhost.conf文件中增加下面的内容：
<VirtualHost *:80>
DocumentRoot "E:/wamp/www/hengxuan"
ServerName 192.168.1.139
</VirtualHost>
在这里我们需要注意的是：192.168.1.139是我们电脑的内网IP地址，那么我们如何查看我们电脑上的内网IP地址，先使用win+r弹出运行命令框，并输入cmd，显示出黑窗口，在黑窗口中输入下面的命令：
ipconfig
视图如下：
执行命令显示内容
在窗口中我们可以看到使用红色标记的就是我们内网IP地址，我们在上面的服务器名称上就添加上内网IP地址，而前面的DocumentRoot是我们要访问的网站的根目录。修改好之后保存。
3. 修改host文件
这个文件在C:\Windows\System32\drivers\etc\HOST文件，打开这个文件，在这个文件中加入下面代码：
127.0.0.1 192.168.1.139
修改成功之后，保存。
4. 重启wamp服务器
左键点击绿色按钮弹出对话框，选择Restart All Services，之后服务器会变成绿色。
5. 将服务器设置为线上（Put Online）
最后一步，也是最重要的一步，还是左键点击绿色服务器按钮，选择Put Online之后，服务器会自动重启，这个时候设置也已经完成了，下面就是我们使用手机访问192.168.1.139这个地址，之后就可以看到下面的页面。如下图：
手机上实现访问本地网站
网友评论