本文已参与「新人创作礼」活动，一起开启掘金创作之路。
几种方案本质其实都是启动一个简易服务器然后手机访问来实现的，一般来说使用框架搭建的项目都会自动启动一个服务所以并不需要使用这些方案再重复启动了，直接在config配置下host即可。
相关链接：
前端简易服务器之免费pages篇
前端简易服务器之杂项篇(nginx,jsp,php)
方案一
使用vscode插件Live Server来实现，安装插件启用后会直接启动一个服务只需要保持手机跟电脑在同一个网络环境下即可访问。 具体步骤如下：
-
打开vscode在扩展中搜索 Live Server 插件选择安装
-
配置下插件的启动所使用的ip，在设置中搜索live在左侧菜单选择扩展>Live Server Config然后在右侧配置项区域找到如下所示项目，更改配置为自己电脑的ip即可（不知道本机ip的可以在命令行输入 ipconfig回车然后找到 IPv4 地址 这一项就是你电脑的ip了）
-
安装完毕后即可在状态栏看到相关状态展示例如 loading 等待加载完毕后该状态会变为 Go Live，点击即可启动服务，以当前所打开的文件夹为根目录最好是以项目为单位打开这样方便访问资源等，防止项目内引用的绝对路径的资源出错。
启动完毕后会展示当前启动在哪个端口下如图为5502端口（默认为5500下，被占用会按顺序延伸5501，5502这样）。
-
启动完毕后会自动拉起网页，复制地址发送到手机然后按需访问即可
总结
这个方法相对而言比较简单快捷，不需要额外的学习成本，还可以同时开启多个服务，配置项也比较丰富，Host也可以配置为域名可以配合别的服务使用此处不一一展开说明。
我的个人公众号：归园田居 每日分享前端知识与资讯～
