您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue webapp項(xiàng)目如何通過HBulider打包原生APP,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
1、webapp項(xiàng)目已經(jīng)通過vue-cli搭建的腳手架寫好了,然后通過webpack打包成一個(gè)部署文件list,如下:
2、打開HBulider,打開目錄,選擇這個(gè)list,項(xiàng)目名稱自己更改。(或者直接新建一個(gè)app項(xiàng)目,然后把里邊的unpackage和manifest這兩個(gè)保留下來,其他的替換成自己dist文件里邊的內(nèi)容)
這個(gè)時(shí)候是web項(xiàng)目,需要改為APP項(xiàng)目(如果直接新建的app,請(qǐng)忽略此步)
更改前:
更改后:
3、在HB中打開這個(gè)dist,可以看到有一個(gè)manifest.json的文件。這個(gè)文件是用來配置應(yīng)用信息的。入口文件一定要對(duì)應(yīng)好,我用VUE寫的單頁應(yīng)用,所以就一個(gè)index.html。
然后配置圖標(biāo)
按著自己項(xiàng)目的要求配置就行了,HB下面列舉的很詳細(xì)。
4、接下來可以通過手機(jī)用USB線與電腦連接進(jìn)行真機(jī)調(diào)試。(必須通過USB線連接才可以,人家HB不支持什么通過無線連接的方式)windows電腦不用說了,可以用一些360助手什么的就可以解決了。如果你的手機(jī)是安卓的,在蘋果電腦下面就沒那么好搞了。后來通過百度加自己的摸索也搞出來。方法就是在蘋果電腦上下載一個(gè)使用 Android File Transfer這個(gè)軟件。要收費(fèi)時(shí),點(diǎn)擊試用就可以了。手機(jī)上需要打開usb調(diào)試,然后選擇 內(nèi)置光盤 就可以與蘋果電腦連接了。手機(jī)自己也有提示(真的很暖心)
連接成功之后,就可以進(jìn)行真機(jī)調(diào)試了。
注:網(wǎng)上很多說自己的VUE項(xiàng)目項(xiàng)目打開一片空白,記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過script標(biāo)簽引入的,而你的路徑不對(duì),打開肯定是空白的。先看一下默認(rèn)的路徑。
module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true,
assetsPublicPath默認(rèn)的是 ‘/' 也就是根目錄。而我們的index.html和static在同一級(jí)目錄下面。 所以要改為 ‘./ '
另外還需要注意一點(diǎn)。src里邊router/index.js路由配置里邊默認(rèn)模式是hash,如果你改成了history模式的話,打開也會(huì)是一片空白。所以改為hash或者直接把模式配置刪除,讓它默認(rèn)的就行 。
// mode: 'history' // 默認(rèn)hash
5、如果真機(jī)測試沒有問題。那么就可以真正的進(jìn)行打包成APP了。
打包成功后,可以通過手動(dòng)下載,或者直接打開下載目錄里邊下載好的。把這個(gè)xxxx.apk文件通過qq或者其他的發(fā)送到你的手機(jī)上,點(diǎn)擊安裝。就可以了。
6、最后,展示一下手機(jī)上的效果。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Vue webapp項(xiàng)目如何通過HBulider打包原生APP”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。