vue項目打包成app

一.利用HBuilder的雲端打包功能 

1.修改原vue項目的vue.config.js 中的publicPath，代碼以下：

module.exports = {
  publicPath:"./"
};

2.執行命令npm run build 打包生成dist
3.打開HBuilder，文件->打開目錄，選擇上述dist目錄，項目名稱且自定義，導入項目
4.將上述項目轉成app項目
5.發行-->打包

2、利用cordova

環境準備：jdk 、android sdk、gradle
1.jdk是個java開發都會安裝了，不廢話，建議配置環境變量爲jdk1.8的,由於目前下載的android sdk/gradle最新版的都對jdk版本有要求

2.android sdk（校驗命令：adb）

• 2.1 下載 安裝

• 2.2 配置環境變量，
  新增系統變量ANDROID_HOME爲安裝路徑
  
  編輯path添加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools（win10下是分開的以下：）
  

• 2.3 啓動SDK Manager，下載依賴
  

• 參考操做以下截圖：
  

3.下載gradle 配置環境變量，都是老一套，先下載，解壓後，配置GRADLE_HOME和path。（校驗命令：gradle -v）

---

不做贅述，自行百度

---

上述環境準備完成後，開始下面的cordova教程：

1.自行安裝nodejs的環境
2.安裝依賴 npm install -g cordova （校驗命令：cordova -v）
3.建立項目 cordova create jeecg-app org.jeecg demoty

• jeecg-app：cordova目錄名
• org.jeecg： 包名
• demoty： 項目名（在config.xml中查看）

4.添加安卓庫 cordova platform add android
5.測試環境 cordova requirements 正常以下：

---

本人出現過一次錯誤以下圖

問題緣由：本人安裝的是android sdk platform是29，可是項目依賴的是28
修改方法：找到下述三個文件，如有版本號限制，修改便可
..cordova項目目錄/platforms/android/project.properties
..cordova項目目錄/platforms/android/CordovaLib/project.properties
..cordova項目目錄/platforms/android/CordovaLib/AndroidManifest.xml

---

---

備註：生成的cordova文件中

• config.xml -包含應用相關信息，使用到的插件以及面向的平臺
• platforms – 包含應用運行平臺如 Android 和 iOS 上對應的 Cordova 庫
• plugins – 包含應用所需插件的 Cordova 庫，使得應用可以訪問例如照相機和電池狀態相關的事項。
• www – 包含應用源代碼，例如 HTML, JavaScript 和 CSS 文件（後面會把vue項目dist下的內容拷貝至此目錄）
• hooks – 包含爲個性化應用編譯系統所需的腳本
• android - Android平臺的cordova庫,執行4操做後纔會生成

---

5.編譯本身的vue項目，npm build 生成dist文件夾，拷貝dist下的內容至上述cordova項目的www文件夾下

6.生成簽名文件： keytool -genkey -v -keystore D:\sign\test.keystore -alias mytest -keyalg RSA -validity 7

---

-keystore D:\sign\test.keystore 表示最終生成的證書路徑，若是直接寫文件名則默認生成在用戶當前目錄下
-alias mytest 表示證書的別名是mytest(後面用到這個) 不寫這一項的話證書名字默認是mykey
-keyalg RSA 表示RSA算法
-validity 7 表示證書有效期7天

密鑰口令和密鑰庫口令在此處手動輸入，需記住，後面有用

---

7.生成apk cordova build android --release (未簽名，成功以下)

8.簽名,將上述D:\sign\test.keystore文件放到未簽名的apk所在的目錄下，輸入如下命令：
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore test.keystore app-release-unsigned.apk mytest
完成後改個名字，發送到手機安裝便可使用

---

上述78步驟能夠有另外兩種方式替代：
1.在cordova項目根目錄下，新建一個 build.json 文件,而後敲命令： cordova build --release

{
  "android": {
    "release": {
      "keystore": "test.keystore",
      "alias": "mytest",
      "storePassword": "",
      "password": ""
    }
  }
}

2.直接敲命令：
cordova build android --release --keystore="test.keystore" --alias=mytest --storePassword=*** --password=***

• keystore 數字簽名證書，
• alias 別名
• storePassword 密鑰庫口令
• password 密鑰口令