首發於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"
  }
}