cordova+vue 項目打包成Android（apk）應用

標籤：環境   java   手動   移動   前端   --   使用   建議   png   

現在使用vue開發的項目越來越多，使用vue開發的移動端打包就成了最大的問題。
現在前端打包方案有好多種，但是綜合來說，我比較喜歡用cordova來進行Android和ios的打包，配置完成之後，每次只需要一條命令就可以完成打包。

1.安裝cordova
這一步的前提是已經完成安裝node和npm,如果沒有安裝的話，請先完成node和npm的安裝。
node安裝：直接進入官網https://nodejs.org/zh-cn/，下載最新版本安裝。安裝之後在命令列中使用”node -v” 檢查安裝是否成功。
npm安裝：由於新版的nodejs已經整合了npm，所以node安裝時npm也一併安裝好了。同樣可以通過輸入 “npm -v” 來測試是否成功安裝。
使用命令

npm install -g cordova

來全域安裝cordova，安裝成功之後，使用命令

cordova -v

來檢查是否正確安裝，正確安裝會顯示安裝的cordova版本號碼。

2.建立cordova項目
執行命令

cordova create myApp1 org.apache.cordova.myApp myApp2cd myApp1

來建立cordova項目，初始化cordova開發環境。
其中：

myApp1：cordova目錄名
org.apache.cordova.myApp： 包名
myApp2： 項目名（在config.xml中查看）

產生的cordova檔案中

config.xml -包含應用相關資訊，使用到的外掛程式以及面向的平台

platforms – 包含應用運行平台如 Android 和 iOS 上對應的 Cordova 庫

plugins – 包含應用所需外掛程式的 Cordova 庫，使得應用能夠訪問例如照相機和電池狀態相關的事項。

www – 包含應用原始碼，例如 HTML, JavaScript 和 CSS 檔案

hooks – 包含為個人化應用編譯系統所需的指令碼

使用命令

cordova platform add android

來產生Android平台的cordova庫，這時platforms檔案夾中會產生一個android檔案夾。
到這裡，cordova項目就已經建好了。

3.建立vue項目

為了方便，不需要每次編譯都拷貝檔案，可直接在cordova項目根目錄中建立vue項目。

首先全域安裝Vue-cli腳手架。

npm install -g vuenpm install -g vue-cli

然後使用命令

vue init webpack MyApp

建立vue項目。完成之後的目錄如下所示。

到這裡，vue項目即構建完成。

4.修改檔案
修改Vue項目config/index.js檔案.

 

5.編譯vue項目
在vue項目根目錄執行命令

npm run build

即可編譯vue項目自動到cordova主目錄下的www檔案夾中。

6.調試打包apk軟體
調試打包軟體之前，首先檢查androidsdk是否正確安裝，執行命令

cordova requirements

即可看到當前環境中sdk安裝情況。顯示如下即表示環境正確安裝。（只需確認正確安裝即可，不需每次都去檢查）

在cordova主目錄下使用命令

cordova run android

來聯調android軟體（需串連真機或者模擬器）。
執行命令

cordova build android

來打包成apk軟體（…/cordovaApp/platforms/android/app/build/outputs/apk/debug/app-debug.apk）。

7.APK簽名
APK都必須經過數位簽章後才能安裝到裝置上，簽名需要對應的認證（keystore），大部分情況下 APK 都採用的自我簽署憑證，就是自己產生認證然後給應用簽名。
數位簽章認證是給APK打包所必需的檔案，所以我們先要把數位簽章認證產生。
在命令提示字元下輸入

keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000

　　*-keystore D:/mytest.keystore表示產生的認證及其存放路徑，如果直接寫檔案名稱則預設產生在使用者目前的目錄下；
　　-alias mytest 表示認證的別名是mytest,不寫這一項的話認證名字預設是mykey；
　　-keyalg RSA 表示採用的RSA演算法；
　　-validity 20000表示認證的有效期間是20000天。*

根據指令輸入密鑰庫口令，是不可見的。依次輸入下面的問題。最後到【否】那裡時輸入y
再輸入密鑰口令（可以與密鑰庫口令相同），如果相同，直接斷行符號，記住這兩個口令，後面簽名會使用到。
這時便會產生一個檔案mytest.keystore，就是我們需要的簽名檔案。

產生帶簽名的apk有兩種方式，一種先產生未簽名debug版本，再加上數位簽章認證然後產生帶簽名的APK。另外一種就是直接一條命令產生帶簽名的APK。
（1）先產生未簽名的debug版本的apk
首先執行命令

cordova build android --release

　就會產生一個app-release-unsigned.apk。把數位簽章放到產生的未簽名的apk所在的目錄下，輸入以下命令：

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mytest.keystore app-release-unsigned.apk mytest

這時的apk就會是一個已經簽名的apk了，修改一下名字即可直接放到裝置上安裝。

(2)直接產生帶簽名的apk
有了數位簽章之後,數位簽章需要放在cordova項目根目錄下或者可以修改下面指令的keystore裡的路徑可以直接在cordova build中指定所有參數來快速打包，這會直接產生一個android-release.apk(已經是帶簽名的了)

cordova build android --release --keystore="mytest.keystore" --alias=mytest --storePassword=testing --password=testing1

keystore 後面是數位簽章認證， –alias 後面是別名 storePassword 後面是密鑰庫口令 password 後面是密鑰口令

注意：命令中口令要替換成自己的，就是產生簽名是需要記住的那兩個口令

但每次打包輸入命令列參數是很重複的，Cordova 允許我們建立一個 build.json 設定檔來簡化操作。在cordova根目錄建立文字文件，改名為build.json。

 

檔案內容如下

{　　”android”: {　　　　”release”: {　　　　　　”keystore”: “mytest.keystore”,　　　　　　”alias”: “mytest”,　　　　　　”storePassword”: “testing”,　　　　　　”password”: “testing2”　　　　　　}　　　　　　}　　}

　　

但下面的兩個密碼建議不要寫到裡面去，可以去掉然後手動輸入。

直接使用

cordova build –release

就可以產生帶簽名的apk了

注意：cordova build後面沒有android

cordova+vue 項目打包成Android（apk）應用