cordova+vue 項目打包成app(不必再使用hbuilder)

時間 2021-08-15

現在我們做移動端項目的時候，要麼用vue要麼用react,用vue最大的問題就是移動端打包。用hbuilder打包是雲端打包總感覺不安全，cordova打包還是蠻好的

第一步：
安裝cordova

npm install -g cordova

是否成功可用如下命令查看

cordova -v

2.新建cordova項目

cordova create myApp1 org.apache.cordova.myApp myApp2

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

生成的cordova文件中

config.xml -包含應用相關信息，使用到的插件以及面向的平臺

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

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

www – 包含應用源代碼，例如 HTML, JavaScript 和 CSS 文件

hooks – 包含爲個性化應用編譯系統所需的腳本

第三步
添加android

cd myApp1
cordova platform add android

第四步
創建vue項目

npm install -g vue
npm install -g vue-cli

上邊兩個如果之前已經安裝過，那麼就不用再運行了。
接下來運行如下命令，初始化項目

vue init webpack appvue

第五步修改Vue項目config/index.js文件.

第六步編譯vue項目
在vue項目根目錄執行命令

npm run build

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

到這一步的時候可先在瀏覽器中打開index.html，看看路徑引用是否正確。

第七步調試打包apk軟件（可跳過）
調試打包軟件之前，首先檢查androidsdk是否正確安裝，執行命令

cordova requirements

第八步：在cordova主目錄下使用命令（可跳過）

cordova run android

來聯調android軟件（需連接真機或者模擬器）

第九步打包

cordova build android

上邊是打包步驟

下面說下打包證書

android 打包證書籤名
運行如下命令，如命令不可用，可在前面加上./

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天。

生成帶簽名的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。

build.json

{
　　」android」: {
　　　　」release」: {
　　　　　　」keystore」: 「mytest.keystore」,
　　　　　　」alias」: 「mytest」,
　　　　　　」storePassword」: 「testing」,
　　　　　　」password」: 「testing2」
　　　　　　}　　
　　　　}
　　}

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

直接使用

cordova build –release

就可以生成帶簽名的apk了