Vue移动网页开发调试过程（第一篇）

一、手机真机预览效果

首先需确定手机网络与电脑网络是在同一个局域网下，也就是同一网络

如果电脑是笔记本电脑连接的wifi，手机连上与电脑连接的同一wifi即可，如果电脑是台式，或者电脑是连接的网线话，下载个wifi共享软件也是可以的

手机连接电脑wifi共享软件开启的wifi频段即可

好了，这里环境上统一后，下载一个hbuilderx软件——前端开发编辑器，其中内置预览效果，下载后导入vue项目文件夹，鼠标右键项目文件夹

在外部命令启动vue项目即可，启动前可能会让你扩展一下软件中的插件，内部终端，扩展就行

软件右上角有个预览按钮，是hbuilderx支持的内部预览功能，也是一个扩展插件，同意就行，然后在网址栏中输入你的vue项目启动后的地址，这里需注意这个网址不要输入localhost的地址，输入包含ip地址的网址，则可展示成功，前面有一个模式栏用于切换，默认是PC模式，

只有当你输入网址栏后，模式栏才可点击切换

切换成手机型号展示成功后，初步完成基础操作，这时点击网址栏前面的四方格小图标生成二维码，手机扫这个二维码后，就可以跳转到与hbuilderx中展示页面相同的网址了，这时手机上就可以展示项目演示效果，如果扫码扫不出来，请确认生成二维码的网址栏地址中是否包含ip地址，并且手机网络与电脑网络是在同一局域网下。

---

好了，这里初步介绍就这么多，实际项目中，我们开发完后，可能不仅仅只是展示效果上达不到预期，还会有其它问题存在，而移动端H5网页，不像PC端网页一样可以直接在谷歌浏览器下调试，所以这就要我们借用一下其它工具调试了,下一篇中介绍,并且该篇介绍中存在问题，比如如果代码存在改动，其它终端想要看到效果的话，需要刷新才行。

这里推荐另一种形式，安装一个依赖包即可，也很简单，按照官方介绍5分钟即可操作成功，

浏览器同步测试工具

因为官方介绍很通透，所以我就不详细描述了，如果还是有不清楚的朋友，评论区留言，我会关注问题内容另起一篇博客帮助介绍。