vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作

更新時(shí)間：2020年07月29日 14:57:57 作者：M.LNG@li

這篇文章主要介紹了vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

一、測試項(xiàng)目是否可以正確運(yùn)行指令:npm run dev

1、首先我們先建立一個(gè)vue的項(xiàng)目，本人用的是vue-cli隨便建立的，然后運(yùn)行項(xiàng)目

二、修改路徑 (assetsPublicPath: ‘./')

1、打開我們config中的js文件，修改assetsPublicPath的路徑為"./"（下圖的右下角位置）

2、檢查下assetsRoot: path.resolve(__dirname, ‘…/dist'),

assetsSubDirectory: ‘static',

assetsPublicPath: ‘./', (一般情況下是這樣的)

三、打包文件指令:npm run build

1、打包后會(huì)生成dist文件

四、創(chuàng)建新目錄（MyApp）

1、在HBuilder中點(diǎn)擊文件，打開目錄，找到我們項(xiàng)目中的打包好的文件下找到dist文件，再命名，然后確定。然后我們會(huì)看到這樣的帶著 W 的文件

五、轉(zhuǎn)換APP

1、點(diǎn)擊該項(xiàng)目右鍵屬性，點(diǎn)擊轉(zhuǎn)換成App(T)

六、關(guān)于manifest.json配置

1、應(yīng)用信息

2、manifest.json里面配置APP名字及APP圖標(biāo)

app圖標(biāo)：現(xiàn)在下面點(diǎn)擊圖標(biāo)配置，然后選擇圖片放上去（圖片只能為PNG格式,通過手動(dòng)改后綴是不可以的）

3、啟動(dòng)圖片（splash）配置,sdk配置等有需要就配置沒有就默認(rèn)

七、調(diào)試和打包生成apk

1、先安裝個(gè)第三方工具（360助手之類的，方便連接模擬調(diào)試）

2、調(diào)試

（運(yùn)行–真機(jī)運(yùn)行–選擇第一個(gè)HBuilder基座運(yùn)行-把HBuilder調(diào)查WebView模式，調(diào)試時(shí)點(diǎn)擊右邊）在這里插入圖片描述

3、調(diào)試完后，進(jìn)行發(fā)行

（1）點(diǎn)擊發(fā)行，發(fā)行為原生安裝包

（2）點(diǎn)擊使用DCloud公用證書，點(diǎn)擊打包

（3）等待制作，下載

4、安裝

（1）可直接通過360助手來安裝，或者用qq或其他發(fā)送到手機(jī)上安裝，如不能直接安裝，就到手機(jī)上文件管理找到文件點(diǎn)擊安裝即可

補(bǔ)充知識(shí)：vue-cli打包成apk的完整方法和打包成app所遇到的問題

vue-cli適合寫spa(單頁面應(yīng)用程序)，因此，我們常會(huì)用它來開發(fā)app,當(dāng)我們?cè)趐c端開發(fā)完成之后，肯定需要打包成apk或者ios（ios我在這里先不闡述）。

我的方法是利用hbuilder來構(gòu)建apk文件。我們將vue項(xiàng)目創(chuàng)建好后，cd項(xiàng)目文件夾，輸入npm run dev(3.0以下版本的命令)/npm run serve(3.0以上命令)，打開瀏覽器，在8080(默認(rèn))下查看是否正常顯示。

然后用npm run build命令將vue項(xiàng)目進(jìn)行打包，打包完成后，在項(xiàng)目文件夾中多了一個(gè)dist文件夾，這時(shí)我們用hbuilder打開vue項(xiàng)目，

右鍵將之轉(zhuǎn)換成移動(dòng)app，如果這時(shí)候直接將之打包成apk，則會(huì)遇到一個(gè)巨大的問題，那就是apk安裝之后，內(nèi)容都是空白，沒有一點(diǎn)東西，原因就是：路徑問題，路徑問題，路徑問題（重要的事情說三篇），打包好后，所有的路徑都是/開頭的，/開頭表示從根目錄開始，而我們需要做的就是將dist項(xiàng)目中的所有/都改為./，./的意思就是當(dāng)前目錄。