如何使用HBuilderX把vue項目打包成apk
更新時間：2022年07月02日 14:44:26 作者：小麥魔法
這篇文章主要介紹了如何使用HBuilderX把vue項目打包成apk，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
1. 下載HBuilderX
官網(wǎng)下載地址：https://www.dcloud.io/hbuilderx.html
2. 安裝HBuilderX
官網(wǎng)安裝說明：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 執(zhí)行打包命令
node build/build.js
在根目錄下面會生成dist目錄。
4. 在HBuilderX中打包apk
4.1 在HBuilderX中新建一個項目
4.2 把之前打包的dist下的內(nèi)容拷貝到此工程下面
4.3 刪除不要的目錄
4.4 點擊：manifest.json，進行以下配置
（1）應用標識
此處需要注冊HBuilder賬號，來獲取AppID。
（2）圖標配置
選擇一個1024*1024的圖標，然后勾選：【自動生成所有圖標并替換】
（3）在【源碼視圖】的plus屬性中，增加以下代碼：
"statusbar" : {
//應用可視區(qū)域到系統(tǒng)狀態(tài)欄下透明顯示效果
"immersed" : true
},
項目上點右鍵→【發(fā)行】→【原生App-云打包】
選擇【使用公共測試證書】。去掉廣告的勾。按下【打包】
【繼續(xù)打包】
根據(jù)提示查看打完的包，就OK了。
注意：每天免費打包的次數(shù)是有限的，且用且珍惜。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應用場景和需求,watch?適合副作用操作,watchEffect適合簡單的自動副作用管理,computed?適合聲明式的派生狀態(tài)計算,本文通過場景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了詳解Vue3.0 前的 TypeScript 最佳入門實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
解決Vue調(diào)用springboot接口403跨域問題
這篇文章主要介紹了解決Vue調(diào)用springboot接口403跨域問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue3中的響應式原理-effect，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
ant-design-vue中的table自定義格式渲染解析
這篇文章主要介紹了ant-design-vue中的table自定義格式渲染，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue.js評論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家介紹了解決vue3?defineProps?引入定義的接口報錯詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08