vue菜鳥從業記：完成項目最後一千米之真機測試和打包上線

最近我朋友王小閏他們公司的項目開發已經進入收尾階段，先後端並行開發的差很少了，聯調也調過了，上篇文章裏也講到了，所謂聯調，就彷彿在說「我也不知道個人接口文檔寫的對不對，咱們驗證一下吧？我也不知道個人數據處理邏輯對不對，咱們驗證一下吧？」， 哈哈哈，自嘲一下~

當一切準備就緒，此時就剩下了完成項目的最後一千米，即真機測試和打包上線。

那麼如何在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，根本沒有啥技術乾貨。可是做爲以記錄王小閏職場生活爲生的我來講，這倒是不少前端新人小白在公司開發項目中繞不過去的一個環節，總結沉澱也好，互訴衷腸也罷，我只想吶喊一句：

以王小閏爲鏡，能夠知得失。

---

更多文章我會第一時間更新在公衆號<閏土大叔>裏面，歡迎關注~