一、配置config/index.js

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

（1）頁面空白的解決：

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

1	assetsPublicPath:?'./',? 發(fā)布路徑

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

因?yàn)榇虬舐窂桨l(fā)生變化，導(dǎo)致這個(gè)圖片就找不到。 stackflow上有一個(gè)解決辦法，很簡單打開“build/utils.js”，增加一行代碼即可??

1	publicPath:'../../'?

　　

二、通過webpack打包

執(zhí)行這樣命令后，可以看到根目錄的dist文件夾下是打包好的靜態(tài)資源

這樣就打包好了，里面有index.html 以及 static文件夾（包含fonts、img、js、css文件夾）兩個(gè)

三、使用hbuilder打開

將dist文件下拖動到huilder軟件中即可

dist文件夾，就是拖動進(jìn)去的，A 標(biāo)記是app的意思，W是web的意思。我這里是已經(jīng)轉(zhuǎn)為app了，所以dist文件夾以 A? 標(biāo)識 ，沒有轉(zhuǎn)換之前是 W 標(biāo)識

四、轉(zhuǎn)換為移動APP

由于我已經(jīng)轉(zhuǎn)為APP，我用helloHBuilder做示范

右鍵需要轉(zhuǎn)為app的文件夾，彈出的快捷菜單中——>轉(zhuǎn)換成移動APP(T)。

?點(diǎn)擊“我知道了”之后，發(fā)現(xiàn)dist文件夾會多了一些文件

?

五、配置manifest.json

（1） 應(yīng)用信息配置

?

“應(yīng)用名稱” ：給你的app取個(gè)名字

“appid” ：右側(cè)點(diǎn)擊“云端獲取”，要登錄注冊你的賬號之后，點(diǎn)擊‘云端獲取’會自動給你填上

“頁面入口” ： 主頁面，因?yàn)槲沂怯胿ue開發(fā)的，所以我只有一個(gè)HTML文件，是index.html

（2）圖標(biāo)配置

其余的”啟動圖片”? “sdk配置” ...我直接略過了

配置應(yīng)用信息和圖標(biāo)配置先試試效果，配置好后，保存。

?

六、真機(jī)運(yùn)行試看效果

準(zhǔn)備好你的手機(jī)，用usb數(shù)據(jù)線連接，開啟開發(fā)者模式（關(guān)于手機(jī)——>連續(xù)點(diǎn)擊版本號，進(jìn)入開發(fā)者模式），允許usb調(diào)試。

點(diǎn)擊hbuilder工具欄上的 “在設(shè)備上運(yùn)行/停止應(yīng)用”圖標(biāo)，類似于這樣，選擇第一個(gè)模式運(yùn)行

接下來，看看你的手機(jī)

手機(jī)現(xiàn)在提示：電腦安裝位置來源? ?同意? ?安裝

會在你的手機(jī)的桌面上安一個(gè)名字是Hbuilder的app （基座）

現(xiàn)在你可以點(diǎn)進(jìn)去，類似于打開app ，看效果

?如果真機(jī)運(yùn)行沒有多大的問題，就可以打開apk了。

?

七、打包為apk

點(diǎn)擊打包，彈出? 我這里先不管權(quán)限，點(diǎn)擊“確認(rèn)沒有缺少權(quán)限，繼續(xù)打包”

取消廣告，繼續(xù)打包

?

?

慢慢等待。?提示打包成功，下載完成

點(diǎn)擊圖中 “打開下載目錄”? ，將apk文件發(fā)送到手機(jī)，我是利用QQ傳到手機(jī)設(shè)備。

手機(jī)接收文件，下載了之后，安裝。

在手機(jī)桌面上，就多了你的app

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

總結(jié)

以上是生活随笔為你收集整理的vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。