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位址:端口号

   就可以在手機通路到啦！

   然後在電腦端的代碼修改和調試都是可以同步到手機上的，是不是很優秀~

總結

其實不是什麼很高深複雜的東西，但是目前也沒有找到其他更好的辦法。希望能夠幫到大家~ 對自己也是日常筆記，争取一天一篇~