前面自己學習搭建了一個簡單的Vue項目
由於考慮到公司需要翻新的項目是Android，所以學習下用Cordova打包
踩坑持續更新
前置條件
Android環境以及Java環境
- Android環境
- 由於機器上之前安裝過Android Studio，所以只需要配置下環境變量就可以了
- 我的電腦 > 屬性 > 高級系統設置 > 環境變量
- 在系統變量裏添加
ANDROID_HOME，值爲Android安裝目錄
![在這裏插入圖片描述]()
- 修改系統變量Path，添加
%ANDROID_HOME%\tools和%ANDROID_HOME%\platform-tools
- Java環境
- 安裝Java環境後遇到了Javac錯誤的問題，解決方案如下
- 在系統變量裏添加
JAVA_HOME，值爲Java安裝目錄
![在這裏插入圖片描述]()
- 修改系統變量Path，添加
%JAVA_HOME%\bin\和%JAVA_HOME%\jre\bin\
No.1 安裝Cordova
如果安裝過就不用再安裝了
這裏解釋下爲什麼用 8.1.2 版本因爲我當時默認 npm install -g cordova 安裝的話是默認 9.0.0 版本的
但是 9.0.0 版本 cordova build android 的時候報錯
Using “requireCordovaModule” to load non-cordova module “q” is not supported.
關於這個錯誤百度搜索說是 9.0.0 版本的坑，具體原因未知，使用 8.1.2 版本正常
若想深入瞭解可參考GitHub上的issues
附上鍊接：https://github.com/xpbrew/cordova-sqlite-storage/issues/856
npm install -g cordova@8.1.2
No.2 新建Cordova項目
cmd 執行四步命令（可簡化爲三步）
// cordovaApp：項目的目錄名稱(path)
// com.cordova.test：項目的ID，用於寫入 config.xml 的 widget 中(ID)
// HelloWorld：應用程序的顯示名稱(name)
// 項目的可選配置項(options)
// --template：可執行項目的模版文件
// --copy-from：指定 src
// --link-to：將前端資源目錄鏈接到 cordova 項目的 www 目錄下
cordova create cordovaApp com.cordova.test HelloWorld
// 進入 cordovaApp 項目目錄
cd cordovaApp
// 添加插件（此步驟可忽略），預防部分機型 webView 版本低導致 Vue App 真機白屏
cordova plugin add cordova-plugin-crosswalk-webview
// 添加 Android 平臺
// 執行此步驟會有如下提示：
// So the minSdkVersion of Cordova project is configured to 16 by default.
// 是因爲 cordova-plugin-crosswalk-webview 對 minSkd 的版本有限制
cordova platform add android
No.3 修改Vue項目
- 修改Vue項目根目錄下的index.html文件
在head中加入如下代碼
<!--防止跨站腳本攻擊 start--> <!--非必須，但建議添加。可能導致頁面樣式改變，如若改變請註釋掉--> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <!--防止跨站腳本攻擊 end--> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">在body中引入cordova.js，示例如下
<body> <div id="app"></div> <script type="text/javascript" src="cordova.js"></script> <!-- built files will be auto injected --> </body> - 修改config文件夾下的index.js文件
// 修改 build 中 assetsPublicPath 的值爲 build: { assetsPublicPath: './', } - 引入vue-cordova，在Vue項目終端執行
npm install vue-cordova --save - 修改src文件夾下的main.js文件，添加如下代碼
import VueCordova from 'vue-cordova' Vue.use(VueCordova); - 運行Vue項目，若運行成功，執行項目打包
運行可能會報
Uncaught SyntaxError: Unexpected token '<'錯誤，可忽略// 運行 Vue 項目 npm run dev // 執行項目打包 npm run build
No.4 將編譯後的Vue文件放至Cordova項目中並編譯apk
- 將Vue項目dist文件夾下所有內容複製到Cordova項目www文件夾下，並替換
- 在Cordova項目終端執行
cordova build android - 若執行成功，則將Cordova項目platforms\android\app\build\outputs\apk\debug中的app-debug.apk文件拷貝到安卓手機安裝即可
關於簽名
- release模式編譯apk
cordova build android --release - 生成簽名證書
// -genkey: 執行生成數字證書 // -v: 將生成證書的詳細信息打印置 dos 窗口 // -keystore XXX.keystore: 數字證書的文件名爲 XXX.keystore（XXX自定義） // -alias XXX.keystore: 證書別名 // -keyalg RSA: 生成密鑰文件採用 RSA 算法 // -validity: 證書有效期 keytool -genkey -v -keystore XXX.keystore -alias XXX.keystore -keyalg RSA -validity 36500 - 在Cordova項目根目錄下新建一個文件夾waitsign，將第一步產生的apk包和第二步產生的簽名包放進去
cd waitsign jarsigner -verbose -keystore XXX.keystore -signedjar name.apk app-armv7-release-unsigned.apk XXX.keystore - name.apk即爲已簽名apk
- 查看簽名信息（md5、SHA1等）
keytool -list -v -keystore ./XXX.keystore -storepass "你設置的密碼"
踩坑
- 若最終編譯報錯，是因爲插件對minSkd的版本有限制（No.2中已說明）
uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library... Suggestion: use a compatible library with a minSdk of at most 16, or increase this project's minSdk version to at least 19, ......修改Cordova項目platforms\android\CordovaLib中的AndroidManifest.xml文件
<!--將 minSdkVersion 的值改爲 16--> <uses-sdk android:minSdkVersion="16" />修改Cordova項目platforms\android\app\src\main中的AndroidManifest.xml文件
<!--將 minSdkVersion 的值改爲 16--> <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="27" />修改Cordova項目platforms\android中的build.gradle文件
allprojects { // ...... // 其他配置 // ...... project.ext { // ...... defaultMinSdkVersion=16 // 將此處的值改爲 16 //...... } } - 重新執行
cordova build android
- 若編譯依舊報錯
error: resource android:attr/fontVariationSettings not found. error: resource android:attr/ttcIndex not found.修改Cordova項目platforms\android中的build.gradle文件，在末尾添加
configurations.all { resolutionStrategy { force 'com.android.support:support-v4:27.1.0' } }修改Cordova項目platforms\android\app中的build.gradle文件，在末尾添加
configurations.all { resolutionStrategy { force 'com.android.support:support-v4:27.1.0' } } - 重新執行
cordova build android編譯成功
- 若安裝apk成功，打開app後報錯
Mismatch of CPU Architecture The Crosswalk Project Service must be updated to match the CPU architecture of the device. Please install it from the app store, then restart app HelloWorld.修改Cordova項目platforms\android\app中的build.gradle文件
android { productFlavors { // ...... // 其他配置 // ...... // 添加代碼（若已存在則忽略） start armv7 { ndk { abiFilters = ["armeabi-v7a"] } } x86 { ndk { abiFilters = ["x86"] } } // 添加代碼 end } } - 經測試發現Cordova項目platforms\android\app\build\outputs\apk\armv7\debug文件夾下的app-armv7-debug.apk可在低版本webView機型上成功安裝並運行
- 若打開app後頁面無法跳轉，是因爲Cordova打包Android時不能使用懶加載且路由模式不能使用history，請修改Vue項目src\router文件夾下index.js中相關內容
- 今天執行
cordova build android時突然就報錯了FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:transformClassesWithDexBuilderForArmeabiDebug'. > com.android.build.api.transform.TransformException: java.lang.IllegalStateException: Dex archives: setting .DEX extension only for .CLASS files ...... - 最終在Cordova項目終端執行
cordova clean然後重新編譯問題解決，2019-11-17記錄