Cordova + vue 打包安卓(Android) apk

本系统通过Vue集成Cesium制作的高精度三维地图引擎，在此基础上进行Android封装，封装与2022-9-26日，亲测可用。

第一步：环境配置

1、安装jdk、sdk及node

略

2、安装Cordova

npm install -g cordova

之后可以查看一下版本

第二步：新建Cordova项目（建议放在英文目录下）

执行行命令

cordova create myApp

myapp ：cordova 目录名

cd myApp 进入目录

使用命令

cordova platform add android

来生成Android平台的cordova库，这时platforms文件夹中会生成一个android文件夹。
在生成的cordova文件中 :config.xml -包含应用相关信息，使用到的插件以及面向的平台platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库plugins – 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。www – 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件hooks – 包含为个性化应用编译系统所需的脚本

到这里，cordova项目就已经建好了。

第三步：Vue项目打包放入cordova项目

需要先将vue.config.js中publicPath属性改为：”/” （没有vue.config.js文件可以百度一个模板自己在根目录创建一个）

然后修改路由，在router的index.js

下修改mode，吧原本的history改为hash

使用打包命令

npm run build

之后将打包文件夹下的文件（默认打包在dist文件夹下）全部复制到cordova项目下的www目录中（将原先www目录中的文件全部删除）

第四步：打包Android

1、调试打包apk软件

在打包之前，检查打包相关环境是否正确安装，在cordova项目文件夹下执行命令。

cordova requirements

即可查看当前环境中安装情况。显示如下即标识环境正确安装。（确认安装正确即可，不需要每次都去进行检查）

2、打包成安卓apk

执行命令

cordova build android -release

3、解决封装成Android时http的不可用问题

最初怀疑是Android 高版本默认不允许http访问造成，查看了platform/android下的Android studio项目AndroidManifest.xml文件，看到其中已经加了

android:usesCleartextTraffic="true"

（没加的一定要加上，加在application标签上，具体加上了如下图）

很显然不是这个原因造成的。

Android默认通信协议支持HTTPS，不支持HTTP，需要修改一下项目中的源码。

将cordova的本地虚拟容器改为http的，是不是就可以了？在项目根目录下搜索ConfigXmlParser.java找到这个文件，打开。

在ConfigXmlParser.java 文件中的原来是这样的：

package org.apache.cordova;import java.io.IOException;
import java.util.ArrayList;
import java.util.Locale;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import org.xmlpull.v1.XmlPullParser;
import org.xmlpull.v1.XmlPullParserException;
import android.content.Context;public class ConfigXmlParser {private static String TAG = "ConfigXmlParser";private static String SCHEME_HTTP = "http";private static String SCHEME_HTTPS = "https";private static String DEFAULT_HOSTNAME = "localhost";private String launchUrl;private String contentSrc;private CordovaPreferences prefs = new CordovaPreferences();private ArrayList<PluginEntry> pluginEntries = new ArrayList<PluginEntry>(20);public CordovaPreferences getPreferences() {return prefs;}public ArrayList<PluginEntry> getPluginEntries() {return pluginEntries;}public String getLaunchUrl() {if (launchUrl == null) {setStartUrl(contentSrc);}return launchUrl;}public void parse(Context action) {// First checking the class namespace for config.xmlint id = action.getResources().getIdentifier("config", "xml", action.getClass().getPackage().getName());if (id == 0) {// If we couldn't find config.xml there, we'll look in the namespace from AndroidManifest.xmlid = action.getResources().getIdentifier("config", "xml", action.getPackageName());if (id == 0) {LOG.e(TAG, "res/xml/config.xml is missing!");return;}}pluginEntries.add(new PluginEntry(AllowListPlugin.PLUGIN_NAME,"org.apache.cordova.AllowListPlugin",true));parse(action.getResources().getXml(id));}boolean insideFeature = false;String service = "", pluginClass = "", paramType = "";boolean onload = false;public void parse(XmlPullParser xml) {int eventType = -1;while (eventType != XmlPullParser.END_DOCUMENT) {if (eventType == XmlPullParser.START_TAG) {handleStartTag(xml);}else if (eventType == XmlPullParser.END_TAG){handleEndTag(xml);}try {eventType = xml.next();} catch (XmlPullParserException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}}}public void handleStartTag(XmlPullParser xml) {String strNode = xml.getName();if (strNode.equals("feature")) {//Check for supported feature sets  aka. plugins (Accelerometer, Geolocation, etc)//Set the bit for reading paramsinsideFeature = true;service = xml.getAttributeValue(null, "name");}else if (insideFeature && strNode.equals("param")) {paramType = xml.getAttributeValue(null, "name");if (paramType.equals("service")) // check if it is using the older service paramservice = xml.getAttributeValue(null, "value");else if (paramType.equals("package") || paramType.equals("android-package"))pluginClass = xml.getAttributeValue(null,"value");else if (paramType.equals("onload"))onload = "true".equals(xml.getAttributeValue(null, "value"));}else if (strNode.equals("preference")) {String name = xml.getAttributeValue(null, "name").toLowerCase(Locale.ENGLISH);String value = xml.getAttributeValue(null, "value");prefs.set(name, value);}else if (strNode.equals("content")) {String src = xml.getAttributeValue(null, "src");if (src != null) {contentSrc = src;} else {// DefaultcontentSrc = "index.html";}}}public void handleEndTag(XmlPullParser xml) {String strNode = xml.getName();if (strNode.equals("feature")) {pluginEntries.add(new PluginEntry(service, pluginClass, onload));service = "";pluginClass = "";insideFeature = false;onload = false;}}private String getLaunchUrlPrefix() {if (prefs.getBoolean("AndroidInsecureFileModeEnabled", false)) {return "file:///android_asset/www/";} else {String scheme = prefs.getString("scheme", SCHEME_HTTPS).toLowerCase();String hostname = prefs.getString("hostname", DEFAULT_HOSTNAME);if (!scheme.contentEquals(SCHEME_HTTP) && !scheme.contentEquals(SCHEME_HTTPS)) {LOG.d(TAG, "The provided scheme \"" + scheme + "\" is not valid. " +"Defaulting to \"" + SCHEME_HTTPS + "\". " +"(Valid Options=" + SCHEME_HTTP + "," + SCHEME_HTTPS + ")");scheme = SCHEME_HTTPS;}return scheme + "://" + hostname + '/';}}private void setStartUrl(String src) {Pattern schemeRegex = Pattern.compile("^[a-z-]+://");Matcher matcher = schemeRegex.matcher(src);if (matcher.find()) {launchUrl = src;} else {String launchUrlPrefix = getLaunchUrlPrefix();// remove leading slash, "/", from content src if existing,if (src.charAt(0) == '/') {src = src.substring(1);}launchUrl = launchUrlPrefix + src;}}
}

把htmls改为html

之后找到项目根目录下的config.xml，添加如下代码：

<access origin="*" subdomains="true" />

保存之后再电脑上借一个pad或者手机

运行

cordova run android

就可以看到手机或者pad上出现我们的Vue项目啦！！！！！！！！！！！！

把htmls改为html

之后找到项目根目录下的config.xml，添加如下代码：

<access origin="*" subdomains="true" />

保存之后再电脑上借一个pad或者手机

运行

cordova run android

就可以看到手机或者pad上出现我们的Vue项目啦！！！！！！！！！！！！