一、配置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

小菜鳥筆記，若有問題，歡迎批評指出，謝謝。

vue項目（webpack+mintui），使用hbuilder打包app