VUE移动端调试

vue-cli + webpack + Browsersync 进行移动端的同步调试

前言

首先呢，你的了解一下 Browsersync 是个什么东西，可以移步Browsersync官网了解下。

然后才是：当我们使用vue-cli搭建vue项目的时候，通常使用的都是 webpack 的模板，但是vue一般都是移动端的项目避免不了移动端的调试，那么既然是移动端的调试怎么能少得了 Browsersync 呢，所以就稍微研究了一下如果把这两者之间结合起来去用，原理就是利用 Browsersync 的代理功能，其实也很简单~

开始来吧

1. 首先就是常规的vue-cli项目搭建
2. 然后按照 Browsersync 官网的步骤安装 node 和 Browsersync（当然，能跑的起来vue-cli node肯定是有的。什么？你不知道什么是vue-cli？）
3. 命令行直接运行vue-cli项目

   

4. 重新打开一个命令行窗口输入如下命令。启动browsersync的代理模式

   $ browser-sync start --proxy "localhost:8080" "*"
              

   

   如果一切ok，那么这时候，会默认的打开你的浏览器，并且可以看到vue的项目！那么就万事大吉啦~

   主要的参数是

   "localhost:8080"

   这个必须是你vue项目的服务器的地址

5. 最后我们如何在手机上面查看。首先让手机连接和你电脑同一个网络的 wifi ，必须是同一个网络。

   在公司怎么办？买一个随身路由器插在你的电脑上连接这个wifi也是可以的，我就是这样~

   最后的最后，在手机浏览器上输入上边命令行窗口提供的

   ip地址:端口号

   就可以在手机访问到啦！

   然后在电脑端的代码修改和调试都是可以同步到手机上的，是不是很优秀~

总结

其实不是什么很高深复杂的东西，但是目前也没有找到其他更好的办法。希望能够帮到大家~ 对自己也是日常笔记，争取一天一篇~