乐趣区

如何在手机上查看电脑上的Vue项目

在 PC 端写好的 Vue 项目,一般都是 npm run dev 编译之后再本地浏览器地址栏输入 localhost:8080 来查看

为什么是输入 localhost:8080, 原因在于 vue 项目的配置文件config 文件夹下的 index.html 中,host意为 主机 localhost 意为 本地主机 port 意为 端口 ,8080 就是默认的 端口,当然你可以随意更改

因为是在本地主机启动的项目,所以只能在写代码的那台电脑查看,下面我们就来介绍如何在手机端查看

1、保证手机和电脑在同一网络下

将你的手机和电脑连接同一个 WIFI, 台式机的话。。。。,略过,以后会写台式机,哈哈

2、查看电脑的内网 IP

内网 IP 哦,就是一般就是 192.168.... 这样的

打开 CMD 命令窗口,输入ipconfig, 回车

3、修改 Vue 项目配置文件

打开刚才上面提到的那个 config 文件夹下的 index.js 文件

host 的值修改为你的IP 地址

port改不改无所谓

4、重新启动 Vue 项目

5、在手机端打开浏览器,输入192.168.0.XXX:8080

OK, 到此结束,该方法要注意两点:

1、手机和电脑在同一网络下
2、项目配置文件中设置的host 一定要是电脑的 IP, 因为如果你电脑重启或者断网后,IP 可能会变化

退出移动版