Cordova框架打包vue +Cocos游戏，打包之后游戏无法打开问题解决

Cordova打包Android应用环境配置指南环境要求： Node.js v20.18.3 npm v10.8.2 JDK 17 Android Studio SDK API level 30 主要步骤：安装Cordova并创建项目添加Android平台和WebView插件将Vue打包后的web项目放入www目录配置环境变量（ANDROID_HOME、Gradle等）修改config

fpx_funs

972人浏览 · 2025-06-30 17:29:40

fpx_funs · 2025-06-30 17:29:40 发布

打包环境

打包环境是我当前本机中的环境（仅供参考，其他版本没有实验，可以自行实验，尽量往我的环境靠）

node：v20.18.3
npm：10.8.2
JDK: JDK17（主要是在gradle打包的时候某些版本需要强制用到JDK17）
Android Studio sdk-api：Api level 30 （需要先下载Android Studio ，下载Android Studio后再从sdk中下载相应的api）。

安装打包工具cordova

安装全局的Cordova，在命令提示符中输入：
```
npm install -g cordova
```
安装完成之后：cordova -v 查看版本校验是否安装成功

在这里插入图片描述

新建cordova项目（放在全英文路径下）

# myApp cordova项目名称
cordova create myApp

cd myApp 目录，添加Andorid平台，这时platforms文件夹中会生成一个android文件夹（这里可以直接用vscode打开这个myApp项目，所有的操作都可以在控制台中操作）。

# 添加 Andorid平台 ，其实会在platform文件夹下创建一个新的Android项目
cordova platform add android
# 添加webview插件，将默认的file通信协议改为http/https协议
cordova plugin add cordova-plugin-ionic-webview

把要打包的vue项目先用npm打包成web项目包，再将打好的包放在myApp项目的www文件夹下，www文件夹原来的文件全部删除。
- 注意事项1：
  
  需要先将vue项目下的vue.config.js中的publicPath属性改为"/"（没有vue.config.js文件可以百度一个模板自己在根目录创建一个），好像不修改也行如图：
- 注意事项2：
  
  vue项目的route模式需要确认是hash模式（默认是hash模式）。
确认打包环境
```
cordova requirements
```
这个报错信息不影响打包，这个是高版本（1.8之后的）jdk内部缺少文件。
- 确保 JDK , SDK , Gradle都能读取到，如果Gradle读取不到可以自己到官网下载一个，并且配置环境变量。
- 配置Android SDK Manage：
  
  勾选完成之后，左边SDK Platforms中去选在对应的API level。

配置环境变量：

配置安卓SDK的环境变量，在下图中C:\User\hhjx\AppData\Local\Android\Sdk, 就是我电脑中sdk的路径。然后将这个路径配置到windows的环境变量中去。

ANDROID_HOME配置好之后在到Path中配置其他的相关环境：
Gradle的文件读取：在打包的时候会读取一个Gradle的压缩文件，这个压缩文件会放在对应的文件中或者自己去阿里云镜像站下载对应的版本。然后根据存放的地址配置一下全局环境变量路径：

CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL

在这里插入图片描述

这个红色框中的"file:///"是必须的，路径斜线不是能是\,必须是/千万不能写错了。

配置允许http请求：

在config.xml文件中添加如下代码：

<platform name="android">
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
        <activity android:usesCleartextTraffic="true" />
    </edit-config>
    <!--  android:usesCleartextTraffic="true"是必须的    -->
    </platform>
    <!--    跨域cors    -->
    <preference name="AndroidInsecureFileModeEnabled" value="true" />

配置图标

在config.xml文件中添加如下代码：

<preference name="android-packageType" value="apk" />
        <platform name="android">
        <!--
            ldpi    : 36x36 px
            mdpi    : 48x48 px
            hdpi    : 72x72 px
            xhdpi   : 96x96 px
            xxhdpi  : 144x144 px
            xxxhdpi : 192x192 px
        -->
      
        <icon src="res/icon/android/72x72.png" density="hdpi" />
        <icon src="res/icon/android/96x96.png" density="xhdpi" />
        <icon src="res/icon/android/144x144.png" density="xxhdpi" />
        <icon src="res/icon/android/192x192.png" density="xxxhdpi" />
    </platform>

创建出res/icon/andriod/文件夹，将对应比例大小的图标图片放入其中，对应像素的图标文件可以使用Hbuilder创建,百度一下.

最终的config.xml文件

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>RtDCSI-Client</name>
    <description>Sample Apache Cordova App</description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <!--加了webview协议，需要加这个允许跨域，但是后端的代码需要允许跨配置-->
    <access origin="*" />
    <allow-navigation href="*" />
    <platform name="android">
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
        <activity android:usesCleartextTraffic="true" />
    </edit-config>
    <!--  android:usesCleartextTraffic="true"是必须的    -->
    </platform>
    <!--    允许file协议，可以查看官网解释    -->
    <preference name="AndroidInsecureFileModeEnabled" value="true" />

    <preference name="android-packageType" value="apk" />
        <platform name="android">
        <!--
            ldpi    : 36x36 px
            mdpi    : 48x48 px
            hdpi    : 72x72 px
            xhdpi   : 96x96 px
            xxhdpi  : 144x144 px
            xxxhdpi : 192x192 px
        -->
      
        <icon src="res/icon/android/72x72.png" density="hdpi" />
        <icon src="res/icon/android/96x96.png" density="xhdpi" />
        <icon src="res/icon/android/144x144.png" density="xxhdpi" />
        <icon src="res/icon/android/192x192.png" density="xxxhdpi" />
    </platform>
</widget>

开始打包：
```
# --debug 才会打包成 apk包 因为现在使用的Gradle版本相对较高，会打成aab包，这个aab包需要有去获取密钥再通过相应的工具转变成apk包。
cordova build android --debug
```
打包之后的apk文件路径：

然后其他配置，可以参考cordova官网。文档 - Apache Cordova 框架
配置环境变量
$env:CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=“https://mirrors.cloud.tencent.com/gradle/gradle-7.6-all.zip”
cordova build android --debug