前面自己学习搭建了一个简单的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文件拷贝到安卓手机安装即可
踩坑
- 若最终编译报错，是因为插件对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文件，在末尾添加
扫描二维码关注公众号，回复： 8505697 查看本文章
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记录
