vue打包成app應用,Webstorm+cordova打包vue成Android專案
一. 打包vue
vue專案開發完成後,
使用 npm run build
打包成功之後,開啟生成的dist資料夾中的 index.html,看看是不是ok的,沒問題就繼續下一步。
二. 使用cordova打包android專案
1. 新建cordova專案
全域性安裝cordova:
npm install -g cordova
建立cordova專案:
cordova create android-app com.dls myapp
其中android-app是專案目錄,com.dls是包名,myapp是應用程式的顯示標題
2. 複製vue專案中 dist 下面得檔案,到建立好的 android-app 專案的 www 檔案下
3.打包android專案
進入剛才建立的android-aap目錄:
cd android-app
然後打包android:
cordova platforms add android --save
打包過程有點慢,第一次打包的時候,我還以為掛了,又來了一遍,打包好之後,就會生成這些檔案。
4. 打包成apk的準備工作
檢查工具是否安裝好(需要安裝Android Studio):
cordova requirements
JDK、SDK、Gradle沒問題就可以開始了(注意保證環境變數配置正確)
所需工具:
(1)下載 java jdk ,網盤地址 :https://pan.baidu.com/s/1rG4P31PCuVcObp2AcRlptQ 提取碼: 3rcj
配置系統環境變數:
(a)新建->變數名"JAVA_HOME",變數值"C:\Java\jdk1.8.0_05"(即JDK的安裝路徑)
(b)編輯->變數名"Path",在原變數值的最後面加上“%JAVA_HOME%\bin”
(c)新建->變數名“CLASSPATH”,變數 值“%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar”
在控制檯分別輸入java,javac,java -version 命令,檢查配置成功
(2)到android studio 官網下載android SDK工具
安裝完成之後,配置 SDK環境變數:
(a)新建->變數名"ANDROID_HOME",變數值"D:\software\android-SDK"(即SDK的安裝路徑)
(b)編輯->變數名"Path",在原變數值的最後面加上“%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools”
開啟命令列,輸入adb,檢視結果
5.生成apk(可參考:https://www.cnblogs.com/qirui/p/8421372.html)
生成簽名:
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天。*
(1)方法一:
生成未簽名的apk:
cordova build android --release
將生成的 簽名檔案 mytest.keystore 放到未簽名的 apk 檔案所在目錄下
把數字簽名放到生成的未簽名的apk所在的目錄下,輸入以下命令:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mytest.keystore app-release-unsigned.apk mytest
(2)方法二:
直接生成帶簽名的apk ,數字簽名需要放在cordova專案根目錄下:
cordova build android --release --keystore="mytest.keystore"
--alias=mytest --storePassword=testing --password=testing1
注: keystore 後面是數字簽名證書, –alias 後面是別名 storePassword 後面是金鑰庫口令 password 後面是金鑰口令
也可以:
在cordova專案根目錄下,新建一個 build.json 檔案
{
"android": {
"release": {
"keystore": "mytest.keystore",
"alias": "mytest",
"storePassword": "",
"password": ""
}
}
}
密碼可以去掉,然後使用:
cordova build --release
注:cordova build後面沒有android