Vue、或使用虚拟主机 在手机上查看效果的方法

Vue在手机上查看效果的方法

1. 修改vue中config->index.js中的host如下
   

1,如何查看本机ip
在命令行中输入 ipconfig, 即可显示本机ip(ipv4)
2,上方host处，可直接写0.0.0.0，表示监听任意ip
也可直接写成本机的ip

2. 修改端口为唯一端口，以做区分；eg:8899

3. 关闭电脑防火墙；

4. 手机与电脑连接相同的网络如果你用的是IP是0.0.0.0，npm run dev后显示的启动网址是0.0.0.0:端口，此时，你需要将0.0.0.0:端口，改为本地的ip:端口的形式方可在电脑和手机上访问。如果你填写的是本机ip,则可直接访问。

   （或者利用浏览器的将网页生成二维码的功能，手机扫描二维码即可访问）
   (注意：用虚拟主机所代表的ip:port形式访问，不要用虚拟主机:端口访问，否则手机访问，无法解析虚拟主机)

使用虚拟域名访问的项目，在手机上访问时，步骤同上。
只不过修改端口是在appach配置虚拟主机时，修改如下

如果不可访问的话，可能是防火墙的原因，关闭防火墙即可

Hbuilder编辑器,手机端调试方法：原理如上

1，设置内置浏览器ip和端口；
工具=>选项=>Hbuilder=>web浏览器=>内置浏览器=>修改ip为本机ip，端口为唯一的端口，以作识别=====>确定
2，打开‘边看边改模式’，在其网页右侧，有二维码图标，手机扫描即可
（用浏览器打开页面，再利用浏览器将网页转为的二维码，手机扫描即可；）

参考链接：https://blog.csdn.net/u014046533/article/details/77429521