vue集成capacitor android并打包為apk實(shí)踐
首先capacitor/android到vue項(xiàng)目
npm install --save @capacitor/core @capacitor/cli
初始化
npx cap init
打包vue項(xiàng)目
npm run build
下載
npm install @capacitor/android
npx cap add android (這個(gè)命令后就有安卓項(xiàng)目啦)
打開as
npx cap open android （這個(gè)會(huì)打開Android Studio，并加載環(huán)境）（可能遇到報(bào)錯(cuò)，，在最后我會(huì)說一說我遇到的問題。。。）
打包安卓項(xiàng)目（前提是項(xiàng)目能正常運(yùn)行）
創(chuàng)建jks文件
點(diǎn)擊Create new..創(chuàng)建一個(gè)jks文件
Jks是用于存儲(chǔ)加密密鑰和證書的，必須要有
（注意：我用黑色涂抹的是我已經(jīng)保存好了的，沒創(chuàng)建過是空的）
填寫必要信息
選擇打包類型和存放路徑
等他打包好就行了，最后在剛剛填寫的路徑里找就可以了
我的放在了桌面上如圖：文件夾（里邊的apk可以直接安裝在手機(jī)）
Android Studio運(yùn)行安卓項(xiàng)目遇到報(bào)錯(cuò)
版本沖突
用 Android Studio打開按做項(xiàng)目后，其剛開始的 gradle 是8.2.1， 然后報(bào)錯(cuò)沖突，試了很多次，換了gradle-8.2-bin.zip 這個(gè)報(bào)錯(cuò)才解決。。。
下載超時(shí)或cannot find jar 'kotlin-compiler-embeddable-1.8.20.jar' required by module 'gradle-kotlin-dsl' using classpath or distribution
這個(gè)問題看到許多人直接手動(dòng)將kotlin-compiler-embeddable-1.8.20.jar下載，然后放到對(duì)應(yīng)的文件夾下面， 但是我這死活不好使….，后來查了查GPT, 在gradle-wrapper.propertie文件下，將下載的url改為國(guó)內(nèi)的就可以啦，distributionUrl=https\://mirrors.cloud.tencent.com/gradle/"你下載的gradle"
改為：
注意本地的java版本與項(xiàng)目中配置的Java版本
這個(gè)是本地的
我剛開始配置中的是VERSION_21 但本環(huán)境是17 于是報(bào)錯(cuò)，改成17就可以了，這個(gè)需要注意一下
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 使用Capacitor將Vue項(xiàng)目轉(zhuǎn)換為Android App的操作步驟
- Vue3?Webview轉(zhuǎn)Android虛擬導(dǎo)航欄遮擋問題解決實(shí)錄
- Vue?+?Android?WebView實(shí)現(xiàn)大文件PDF預(yù)覽完整解決方案(附詳細(xì)代碼)
- vue3項(xiàng)目打包成apk(android)詳細(xì)圖文教程
- 三步搞定:Vue.js調(diào)用Android原生操作
- 分別使用vue和Android實(shí)現(xiàn)長(zhǎng)按券碼復(fù)制功能
- Vue中android4.4不兼容問題的解決方法
- Android與Vue的交互的方法示例
相關(guān)文章
vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問題及解決
這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3使用組合式API實(shí)現(xiàn)代碼的邏輯復(fù)用
在 Vue 3 的生態(tài)中,組合式 API（Composition API）引入了全新的方式來構(gòu)建組件,使得邏輯復(fù)用變得更加簡(jiǎn)單和靈活,在傳統(tǒng)的選項(xiàng)API中,邏輯復(fù)用通常依賴于混入和高階組件,本文將通過示例,帶你了解如何在 Vue 3 中使用組合式 API 來實(shí)現(xiàn)代碼的邏輯復(fù)用2025-01-01
利用Vue3的Teleport實(shí)現(xiàn)模態(tài)對(duì)話框功能
在前端開發(fā)中,模態(tài)對(duì)話框是一種常見的用戶交互方式,它能夠有效地提示用戶、收集信息或確認(rèn)操作,隨著現(xiàn)代框架的演進(jìn),Vue 3 的出現(xiàn)為我們提供了更便捷、高效的方式來處理復(fù)雜的界面布局,今天,我們將深入探討如何利用 Vue 3 的新特性 Teleport 來實(shí)現(xiàn)模態(tài)對(duì)話框2025-02-02
vue-calendar-component日歷組件報(bào)錯(cuò)Clock is not defi
這篇文章主要為大家介紹了vue-calendar-component日歷組件報(bào)錯(cuò)Clock is not defined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
el-upload http-request使用 多個(gè)文件上傳攜帶其他參數(shù)方式
這篇文章主要介紹了el-upload http-request使用 多個(gè)文件上傳攜帶其他參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了如何在vue單頁中重復(fù)引入同一子組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue使用html2canvas和jspdf實(shí)現(xiàn)PDF文件導(dǎo)出
這篇文章主要為大家詳細(xì)介紹了Vue如何使用html2canvas和jspdf實(shí)現(xiàn)PDF文件導(dǎo)出功能并設(shè)置頁面大小及方向,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
vue中el-tree增加節(jié)點(diǎn)后如何重新刷新
這篇文章主要介紹了vue中el-tree增加節(jié)點(diǎn)后如何重新刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時(shí)候,并不會(huì)去改變?cè)械脑睾蛿?shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue學(xué)習(xí)筆記分享之Vue組件化編程,文中把知識(shí)點(diǎn)都一一羅列出來了,方便整理學(xué)習(xí),需要的朋友可以參考下2023-03-03