Vue项目整合Cordova一键打包apk

首发于Enaium的个人博客

---

Cordova是一个依赖于Node.js的工具，它可以将HTML页面打包为apk等移动端应用，本篇文章将介绍如何使用Cordova将Vue项目打包为apk。

创建Corodva项目

首先，我们需要安装Cordova，可以使用npm进行安装：

npm install -g cordova

安装完成后，我们可以使用cordova create命令创建一个Cordova项目：

cordova create test

之后进入到test目录，添加到Android平台：

cd test
cordova platform add android

这样就可以测试Cordova项目了，可以使用cordova build进行打包。

在打包之前需要注意以下几点：

• 如果之前没有使用过Java编程语言，则需要安装JDK，并且版本需要大于等于11。
• 如果之前没有使用过Gradle，则需要安装Gradle，并配置它的bin目录到PATH环境变量。
• 如果之前没有开发过Android项目，则需要安装Android Studio，并下载Android SDK，然后配置ANDROID_HOME环境变量。

如果过程顺利，那么会在app/build/outputs目录下生成apk文件。

整合Vue项目

首先我们可以将vue和cordova当成一个子项目，之后统一打包。

这里我们可以将cordova项目中的config.xml文件复制到一个空白的node项目中，之后创建一个空白的www目录，之后添加cordova依赖，这样就可以直接使用npx cordova add platform android添加android平台，通过npx cordova build进行打包。

之后通过修改vite.config.ts配置文件，将outputDir修改为www目录，这样就可以将vue项目打包到cordova项目中。

export default defineConfig({
  build: {
    outDir: "../cordova/www"
  }
})

这样vue和cordova就整合到一起了。

一键打包

我们可以通过配置根项目的package.json文件，添加scripts命令，这样就可以一键打包apk了。

Cordova:

{
  "scripts": {
    "build": "cordova build android",
    "run": "cordova run android"
  }
}

Vue: 默认

{
  "workspaces": ["packages/vue", "packages/cordova"],
  "scripts": {
    "vue:dev": "cd packages/vue && yarn dev",
    "vue:build": "cd packages/vue && yarn build",
    "cordova:build": "cd packages/cordova && yarn build",
    "cordova:run": "cd packages/cordova && yarn run",
    "build": "yarn vue:build && yarn cordova:build"
  }
}