一、配置config/index.js
本人沒有配置index.js文件，就開始進行了打包，結果最終效果是頁面空白，解決了空白，接着底部圖標（我是用的阿里巴巴圖片）資源找不到。所以配置這步比較重要。
（1）頁面空白的解決：
打開config/index.js，將build模塊的assetsPublicPath值改為’./’
assetsPublicPath: './', 發布路徑
（2）css引用圖片資源找不到問題：
因為打包后路徑發生變化，導致這個圖片就找不到。 stackflow上有一個解決辦法，很簡單打開“build/utils.js”，增加一行代碼即可
publicPath:'../../'
二、通過webpack打包
執行這樣命令后，可以看到根目錄的dist文件夾下是打包好的靜態資源
這樣就打包好了，里面有index.html 以及 static文件夾（包含fonts、img、js、css文件夾）兩個
三、使用hbuilder打開
將dist文件下拖動到huilder軟件中即可
dist文件夾，就是拖動進去的，A 標記是app的意思，W是web的意思。我這里是已經轉為app了，所以dist文件夾以 A 標識 ，沒有轉換之前是 W 標識
四、轉換為移動APP
由於我已經轉為APP，我用helloHBuilder做示范
右鍵需要轉為app的文件夾，彈出的快捷菜單中——>轉換成移動APP(T)。
點擊“我知道了”之后，發現dist文件夾會多了一些文件
五、配置manifest.json
（1） 應用信息配置
“應用名稱” ：給你的app取個名字
“appid” ：右側點擊“雲端獲取”，要登錄注冊你的賬號之后，點擊‘雲端獲取’會自動給你填上
“頁面入口” ： 主頁面，因為我是用vue開發的，所以我只有一個HTML文件，是index.html
（2）圖標配置
其余的”啟動圖片” “sdk配置” ...我直接略過了
配置應用信息和圖標配置先試試效果，配置好后，保存。
六、真機運行試看效果
准備好你的手機，用usb數據線連接，開啟開發者模式（關於手機——>連續點擊版本號，進入開發者模式），允許usb調試。
點擊hbuilder工具欄上的 “在設備上運行/停止應用”圖標，類似於
這樣，選擇第一個模式運行
接下來，看看你的手機
手機現在提示：電腦安裝位置來源 同意 安裝
會在你的手機的桌面上安一個名字是Hbuilder的app （基座）
現在你可以點進去，類似於打開app ，看效果
如果真機運行沒有多大的問題，就可以打開apk了。
七、打包為apk
點擊打包，彈出
我這里先不管權限，點擊“確認沒有缺少權限，繼續打包”
取消廣告，繼續打包
慢慢等待。
提示打包成功，下載完成
點擊圖中 “打開下載目錄” ，將apk文件發送到手機，我是利用QQ傳到手機設備。
手機接收文件，下載了之后，安裝。
在手機桌面上，就多了你的app
小菜鳥筆記，若有問題，歡迎批評指出，謝謝。