1. 程式人生 > >vue+cordova開發混合app

vue+cordova開發混合app

這篇文章主要記錄了我自己的vue專案如何和cordova結合,最後編譯成安卓app

 

一、安裝cordova

npm install -g cordova

ordova安裝時不能使用cnpm 應該使用npm,cnpm雖然快但是後期出的錯絕對比這省下來的時間多得多

二、建立cordova應用

cordova create oneApp

 

三、建立vue專案(用已有的專案也可以)

 

四、把vue專案放到cordova應用專案資料夾中

五、修改vue專案config/index.js檔案

 

六、對vue專案進行build

執行npm run build

編譯之後打包生成的程式碼自動跑到主目錄下的WWW檔案下

 

七、在cordova應用目錄執行cordova build iOS、cordova build Android等

在這一步,遇到的問題比較多。

執行cordova build Android,報錯

這個提示沒有安卓平臺 那就執行 cordova platform add android

新增平臺後,再次執行cordova build Android,報錯

提示沒有安卓路徑,說明電腦沒有安卓環境,要去配置安卓環境。

我是先下載sdk maneger 地址:

http://tools.android-studio.org/index.php/sdk/

 

我下了壓縮包,解壓後會看到sdk manager.exe

開啟後選擇sdk下載

我下載了圈起來的,下載完後配置環境變數,具體操作自行百度

配置完後再在cordova應用的目錄下執行 cordova build Android

這時候跑錯

Could not find an installed version of Gradle either in Android Studio, or on your system to install

差不多是這個錯,忘記截圖了

解決方法:

1、手動下載gradle

gradle-x.x-bin.zip (x.x代表版本) 

根據需要下載某一版本 

地址: 

(https://services.gradle.org/distributions)

2、新增環境變數

PATH=C:\Program Files\gradle-x.x\bin

 

再次執行cordova build Android

這時候開始下載大量東西

最後提示

編譯失敗,看了一下是路徑有中文變成亂碼的問題,於是改了資料夾名字,再執行cordova build Android

終於成功了

apk在框起來的路徑中,oneapp是我的cordova應用目錄

 

以上是我測試將兩者結合的過程,vue專案中還沒呼叫cordova介面,不知道是否可以呼叫介面