最近我朋友王小閏他們公司的專案開發已經進入收尾階段，前後端並行開發的差不多了，聯調也調過了，上篇文章裡也講到了，所謂聯調，就彷彿在說“我也不知道我的介面文件寫的對不對，我們驗證一下吧？我也不知道我的資料處理邏輯對不對，我們驗證一下吧？”， 哈哈哈，自嘲一下~
當一切準備就緒，此時就剩下了完成專案的最後一公里，即真機測試和打包上線。
那麼如何在vue專案裡做真機測試呢？王小閏準備在leader面前大展身手，展示下自己最近的學習成果，讓我們跟著王小閏的節奏操練起來~
首先需要在命令列中輸入 npm run dev ，啟動自己的vue專案，例：http://localhost:8080，讓專案在瀏覽器裡跑起來：
如果你用的是windows系統，輸入快捷鍵WIN+R，輸入cmd啟動命令列工具，輸入ipconfig檢視本機IP。
如果你用的是MacOS系統，輸入command+空格鍵，然後再搜尋框輸入terminal，敲回車進入終端命令列，輸入ifconfig檢視本機IP。
以mac為例，如下圖：
我們這臺機器在內網裡的ip地址是192.168.1.4。
然後回到瀏覽器，將執行著localhost:8080 替換為192.168.1.4:8080,結果發現如圖所示，瀏覽器拒絕了我們的連線請求：
接下來我們就要分析原因了，將位址列裡的8080去掉，換成192.168.1.4/api/，然後再訪問一次。測試之後，發現IP是沒有問題的，問題出在8080埠無法被外部訪問。
原因是我們前端的專案是通過webpack-dev-server啟動的，而webpack-dev-server預設不支援IP的形式進行頁面的訪問，所以我們應該將它的配置項做一個修改。
跟著王小閏的節奏，快速開啟專案根目錄下的package.json檔案，每次執行npm run dev的時候，本質上都在執行它後面定義的 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
如果你想讓webpack-dev-server能夠通過IP地址被訪問的話，只需要在其後面新增一段”--host 0.0.0.0“就可以了，連起來就是
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js"
然後我們儲存下package.json檔案，重啟下服務，再回到瀏覽器重新輸入IP+埠號，發現就可以正常訪問了。
當進行到這個階段，我們就可以讓手機在內網裡直接通過IP地址訪問這個網頁了。記住，只需要讓你的手機和你的電腦在同一個區域網下就可以正常訪問了。
如下圖手機截圖所示，這裡僅僅給大家做個演示以便理解：
通過這幾步，王小閏就實現了vue專案裡面的真機測試。
還有一種方法就是，本機ip替換localhost，然後使用草料二維碼，將http://192.168.1.4:8080生成二維碼，將手機連線到與電腦相同的WIFI，掃一掃即可在手機預覽。
大家在做真機測試的時候，因為各種手機的機型不太一樣，王小閏這邊測試用的是一臺iPhoneSE，如果大家是一些比較低版本的安卓手機，可能你會在手機上訪問這個頁面，會出現白屏的現象。
它可能有兩種情況產生，第一種情況是：你的手機瀏覽器上預設不支援promise這個東西，那麼如何解決這個相容性問題呢？
解決這個問題需要安裝一個第三方的包，在終端裡輸入 npm install babel-polyfill --save
babel-polyfill這個第三方的包會幫我們判斷，如果瀏覽器裡沒有promise，會自動幫我們往裡面新增這些es6的新特性。
安裝好之後我們需要重啟一下伺服器，然後跟著王小閏的節奏，開啟src/main.js檔案，在檔案開頭引入 import 'babel-polyfill'，然後所有瀏覽器就都可以完美支援promise了，之前的一部分童鞋手機測試白屏的問題就解決了。
第二種情況是，即使新增上這個第三方包，有的同學手機上依然會出現白屏問題，那麼這個鍋就該讓webpack來背了。 這其中就涉及到了vue專案的打包上線。
當我們做vue專案上線的時候，首先第一步需要在終端執行一個命令 npm run build
此時，vue的腳手架工具會幫我們自動的對src目錄下的原始碼進行打包編譯，生成一個能被瀏覽器執行的程式碼，同時這個程式碼是被壓縮過的。稍等片刻，打包過程便會執行完畢，這時終端裡會顯示 Build complete
值得注意的是，build成功後有個tip提示你build後的檔案需要部署在http伺服器上，不能通過file協議開啟。
這個時候，你會發現，專案根目錄裡多了一個dist目錄：
開啟dist檔案看看，裡面的檔案就是我們要打包上線的內容：
然後王小閏把dist資料夾裡面的內容提交到SVN，後端的童鞋會從SVN上拉取下來前端打包過來的dist原始碼，然後扔到後端伺服器的根目錄下就OK了。
此時，後端的伺服器已經有了前端的程式碼，預設會顯示index.html，同時index.html上面又引入了打包生成的css和js檔案，那麼整個前端的程式碼就可以在後端的伺服器上完美的執行起來了。同時後端伺服器上還有後端提供的介面，這樣就把前端的程式碼融合到了後端的專案，整個把後端專案進行上線，那我們的webAPP也就做完了。
至此，王小閏就完成了最簡單的專案真機測試與打包上線。
最後，閏土有話說：
看完這篇文章的一部分童鞋可能會覺得，so easy，根本沒有啥技術乾貨。但是作為以記錄王小閏職場生活為生的我來說，這卻是很多前端新人小白在公司開發專案中繞不過去的一個環節，總結沉澱也好，互訴衷腸也罷，我只想吶喊一句：
以王小閏為鏡，可以知得失。
更多文章我會第一時間更新在公眾號<閏土大叔>裡面，歡迎關注~
