一、配置config/index.js

本人沒有配置index.js文件，就開始進行了打包，結果最終效果是頁面空白，解決了空白，接著底部圖標（我是用的阿里巴巴圖片）資源找不到。所以配置這步比較重要。

（1）頁面空白的解決：

打開config/index.js，將build模塊的assetsPublicPath值改為’./’

1	assetsPublicPath:?'./',? 發布路徑

（2）css引用圖片資源找不到問題：

因為打包后路徑發生變化，導致這個圖片就找不到。 stackflow上有一個解決辦法，很簡單打開“build/utils.js”，增加一行代碼即可??

1	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 - 小小人儿大大梦想 - 博客园的全部內容，希望文章能夠幫你解決所遇到的問題。

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