如何使用HBuilderX把vue項目打包成apk

Posted on by

1. 下載HBuilderX

官網下載地址：https://www.dcloud.io/hbuilderx.html

2. 安裝HBuilderX

官網安裝說明：https://hx.dcloud.net.cn/Tutorial/install/windows

3. 在vscode中打包vue項目

3.1 在打包vue項目之前

需要修改以下幾處配置：

（1）config\index.js

把build下面的assetsPublicPath的值，從’/‘改為’./’：

（2）src/router/index.js

mode如果是history，註釋掉。

根目錄直接指向想要的畫面。

（3）build\utils.js

找到圖中的if代碼，添加以下語句（以防css裡找不到資源文件）：

publicPath: '../../'

3.2 執行打包命令

node build/build.js

在根目錄下面會生成dist目錄。

4. 在HBuilderX中打包apk

4.1 在HBuilderX中新建一個項目

4.2 把之前打包的dist下的內容拷貝到此工程下面

4.3 刪除不要的目錄

4.4 點擊：manifest.json，進行以下配置

（1）應用標識

此處需要註冊HBuilder賬號，來獲取AppID。

（2）圖標配置

選擇一個1024*1024的圖標，然後勾選：【自動生成所有圖標並替換】

（3）在【源碼視圖】的plus屬性中，增加以下代碼：

"statusbar" : {
    //應用可視區域到系統狀態欄下透明顯示效果
    "immersed" : true
},

項目上點右鍵→【發行】→【原生App-雲打包】

選擇【使用公共測試證書】。去掉廣告的勾。按下【打包】

【繼續打包】

根據提示查看打完的包，就OK瞭。

註意：每天免費打包的次數是有限的，且用且珍惜。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：