cordova打包vue项目 - 混合app 从入门到发布

环境安装

• Node.js (此处不作介绍)
• Java
• Android SDK
• Gradle

Java

根据 Cordova 的环境要求，请务必安装 JDK8。如果不是 JDK8，Cordova 将会在打包过程中报 Java 版本不符的错误。

配置环境变量，在系统变量中，添加 JAVA_HOME 的变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eifClzL4-1587104715419)(https://s2.ax1x.com/2019/10/11/uHDQZ8.png)]

在 PATH 中添加 bin 目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YF6VtotE-1587104715437)(https://s2.ax1x.com/2019/10/11/uHrghQ.png)]

如果在命令行中输入 java 命令，可以看到以下内容，则 Java 安装成功
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WBzjh3P6-1587104715443)(https://s2.ax1x.com/2019/10/11/uHrzB6.png)]

Android SDK

Android SDK 目前都已经集成到了 Android Studio 中，下载 Android Studio 就可以在里面下载对应的 SDK。

下载安装完 Android Studio 之后，在 setting 中管理下载对应的 SDK，此处安装了 10.0 和 9.0 版本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rX0qaU7F-1587104715452)(https://s2.ax1x.com/2019/10/11/uH6xun.png)]

在 AVD Manage 中添加一台 Android 虚拟设备
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uyVanPKq-1587104715456)(https://s2.ax1x.com/2019/10/11/uHgCqI.png)]

点击 Actions 中的绿色箭头，启动 Android 虚拟设备，出现如下设备界面，说明成功
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ovebZ89E-1587104715458)(https://s2.ax1x.com/2019/10/11/uHgfeI.png)]

Gradle

Gradle 是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具。

下载 Gradle 的 binary-only 包（此处为 5.6.2 版本），因为该网站被公司屏蔽，所以如果碰到无法下载的情况，请自行连接到自己的手机 Wi-Fi 进行下载。

将 Gradle 添加到系统的环境变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kMTPNKTs-1587104715461)(https://s2.ax1x.com/2019/10/11/uHflX4.png)]

在命令行中执行 gradle 指令，如果出现以下内容，则说明配置成功
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xWMcSnze-1587104715464)(https://s2.ax1x.com/2019/10/11/uHfg4P.png)]

创建项目

使用 npm 全局安装 Cordova

npm i -g cordova

创建 Cordova 项目文件夹

mkdir cordova-project

cd cordova-project
cordova create cordova-app # 创建 cordova 项目

此时可以使用

cd cordova-app
cordova requirements

来检查当前的 cordova 项目的环境是否满足构建条件，如果均满足，则可以看到以下结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vU9nlV6Z-1587104715467)(https://s2.ax1x.com/2019/10/11/ubiGtI.png)]

构建 apk

cordova platform add android # 添加安卓

cordova build android # 构建 android 包

在构建的过程中，如果出现网络报错，是因为 Gradle 回去下载相关的依赖，但是 Gradle 的下载网址被公司屏蔽，所以请自行连接到手机 Wi-Fi，然后重新执行 build 命令。

打包完成之后，就可以在以下目录中找到 Android 的 apk 安装包

...\cordova-project\cordova-app\platforms\android\app\build\outputs\apk\debug\app-debug.apk

将 apk 安卓包直接拖拽到 Android 虚拟设备中，就可以进行安装和预览项目，例如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAczUAwM-1587104715471)(https://s2.ax1x.com/2019/10/11/ub9plD.png)]

创建 Vue 项目

在 cordova-project 文件夹根目录下，创建 Vue 项目

vue create vue-mobile-project

# 或

# 后续的教程将会基于 sweet-ui-mobile-pro 进行
# sweet-ui-mobile-pro 是一个现成的 Vue Mobile demo
# 仓库地址：https://gitlab.geely.com/C-SWEET-FRONTEND/sweet-ui-mobile-pro
# 你也可以使用 git clone 来体验现成的案例
git clone https://gitlab.geely.com/C-SWEET-FRONTEND/sweet-ui-mobile-pro.git

修改 vue.config.js 文件（如果没有 vue.config.js 文件，则在 Vue 项目的根目录下创建），并写入一下配置

module.exports = {
  publicPath: './', // 部署应用包时的基本 URL。此处应该设置为相对路径，否则构建的 APP会变成空白，无法获取的对应的资源
  outputDir: '../cordova-app/www', // 项目直接打包输出到 cordova-app 的 www 目录中
};

对 Vue 项目进行构建

npm run build

对 Cordova 项目进项构建

#切换到 cordova-app 目录
cordova build android

重新安装打包后的 apk 在 Annroid 虚拟机上进行安装和预览，如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b00JmFdS-1587104715473)(https://s2.ax1x.com/2019/10/11/ubCzse.png)]

如果要构建 release 包，则需要加上 –release参数

cordova build android --release

首次构建 release 包， Cordova 会下载相关依赖，公司内会导致下载失败，请链接到自己的手机 Wi-Fi 进行下载。