使用HBuilderX實現打包vue項目成app

1、準備開發工具

開發工具：HBuilderX

官網地址：http://www.dcloud.io

（標準版須要本身安裝插件，app開發版已經把app開發經常使用的插件安裝好了，開箱即用，建議使用開發版）

2、打包生成一個vue項目

就拿手頭上一個vue項目進行打包，vue項目預覽以下：

打包生成的項目結構：

3、建立HBuilder的app項目

（請先註冊HBuilde帳號並登陸，打包的時候須要登陸，並獲取應用識別AppID）

建立完後會看到如下結構：

其中css、img、js文件夾換成打包後的static，index.html換成打包後的index.html。

Unpackage是用來放置app圖標等app文件的，index.html是app入口，manifest.json是用來打包成app的配置文件。

替換完後，變成如下目錄結構：

4、配置manifest.json

點擊manifest.json會打開配置頁面。

1、基礎配置：

①：應用識別AppID：雲端獲取，須要註冊並登陸

②：應用名稱、版本、版本號等設置按說明填寫便可

二、圖標配置：設置app圖標，上傳完圖片後，點擊自動生成全部圖標並替換，以下：

三、啓動圖配置：

不顯示等待雪花

設置安卓啓動圖片

四、SDK配置：根據項目使用狀況填寫

五、模塊權限配置：根據項目使用狀況填寫

六、源碼視圖：略

5、進行打包

以上配置完成後，就能夠進行打包App了。點擊發行，選擇原生App-雲打包，會彈出雲打包彈框：

一、暫時只打包安卓，因此只勾選安卓

二、若是沒有自有證書，就選擇使用DCloud公用證書

三、不勾選廣告聯盟和換量聯盟

以下：

 

點擊打包便可。

提交完後，留意HBuilderX控制檯信息

點擊下載連接下載安裝包就能夠了。