最近我朋友王小閏他們公司的項目開發已經進入收尾階段，前后端并行開發的差不多了，聯調也調過了，上篇文章里也講到了，所謂聯調，就仿佛在說“我也不知道我的接口文檔寫的對不對，我們驗證一下吧？我也不知道我的數據處理邏輯對不對，我們驗證一下吧？”， 哈哈哈，自嘲一下~

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

那么如何在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，根本沒有啥技術干貨。但是作為以記錄王小閏職場生活為生的我來說，這卻是很多前端新人小白在公司開發項目中繞不過去的一個環節，總結沉淀也好，互訴衷腸也罷，我只想吶喊一句：

以王小閏為鏡，可以知得失。

---

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

總結

以上是生活随笔為你收集整理的vue菜鸟从业记：完成项目最后一公里之真机测试和打包上线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。