一個採用 Vue.js 、 Cordova 及 Capacitor 套件而成的 Hybrid App
前置作業:Vue與Cordova專案融合
- 創建及合併專案
此時,會出現這個畫面
請選擇 Merge ,讓兩個專案合併
- 設定環境
- 新增Vue設定檔
- 在vue.config.js 輸入以下
- 安裝Cordova Plugin環境
- main.js中加入
Cordova Plugins 安裝
- 執行指令:
$ cordova plugin add cordova-plugin-device
- 此專案使用到的plugins
使用 Cordova 指令輸出
各App平台輸出專案位置
- iOS:platforms/ios
- Android:platforms/android
Vue輸出app專案
- 若platforms下無此專案,請執行:
- iOS:
$ cordova platform add ios
- Android:
$ cordova platform add android
-
若platforms下已有此專案,且Vue專案已做更改,需重新輸出App,請執行:
- iOS:
- Android:
使用 Capacitor 指令輸出
安裝 Capacitor
初始化Cap
Capacitor輸出設定檔
- capacitor.config.json
各App平台輸出專案位置
- iOS:./ios
- Android:./android
Vue輸出app專案
- 若無app專案,請先執行:
- iOS:
$ npx cap add ios
- Android:
$ npx cap add android
-
若已有app專案,且Vue專案已做更改,需重新輸出App,請執行:
- iOS:
- Android: