1. 程式人生 > >vue打包成app應用,Webstorm+cordova打包vue成Android專案

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