現在使用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 myApp2 cd 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 vue npm 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
如果這篇文章對你的工作或者學習有幫助的話,請收藏或點個贊。如果對其中有什么不明白的或者報錯,可以留言或者加QQ群140455228交流。