天天看點

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

vue項目, HBuilder / HBuilderX有的情況下

第一步, 使用HBuilder建立一個app項目, 我使用的是HBuilderX, 步驟如下:

選擇左上角, 檔案, -> 建立 -> 項目 會出先這樣的畫面:

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

那麼我們選擇 5+App那個選項, 

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

這樣我們就有一個基本的app模闆了

然後我們在打包我們的vue項目, 使用npm run builder 方法打包,會生成dist檔案夾

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

那麼将這個檔案夾内的東西, 不包括dist這個主檔案夾, 複制到前面HBuilder建立好的app模闆裡面去, 會出現這樣

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

我們選擇将原本的index.html 也就是網頁的入口檔案, 給覆寫了, 使用我們自己的, 這樣子目錄就會是這樣子的

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

使用的是vue項目打包号的index.html檔案,

其他的詳細參數是放在manifest.json檔案中的, 點開他會出現這樣

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

這裡面有很多參數可以琢磨, 可以以後有時間了慢慢研究, 

那麼接下來, 就是進行app打包操作了

我們選擇菜單欄中的 發行 -> 原生app-雲打包, 這樣就可以打包了

點選之後, 會出現這樣的畫面

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

分為安卓和ios, 如果不要ios的直接将上面的ios取消, 

最終我的選擇是這樣的

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

就可以點選打包了

點選之後呢, 就是等待了

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

等待完成就可以下載下傳了

使用Hbuilder打包vue項目appvue項目, HBuilder / HBuilderX有的情況下

這樣一個app就完成啦, 是不是很友善啊!

繼續閱讀