Vue.jsとCordovaを統合してハイブリッドアプリを作る

最初にCordovaプロジェクトを作る。

cordova create <アプリ名> com.example.app

それからVue.jsプロジェクトを作る。

vue init pwa <アプリ名>

ここでの<アプリ名>は先ほどcordovaディレクトリを作成する時に使ったものと同じものを利用する。 ディレクトリ名が同じなので既にフォルダーがあるってvuecliに怒られるけど、Yes を選択するとCordovaフォルダのなかにVueが統合された感じで作られる。

あとは、vuecliによって自動で作成された設定ファイルを編集し、ビルド先をwwwに変更すればいい。

index: path.resolve(__dirname, '../www/index.html'), // 変更
assetsRoot: path.resolve(__dirname, '../www'), // 変更
assetsSubDirectory: 'static', // 変更
assetsPublicPath: './'

注)ファイル名先頭の@はvue.jsプロジェクトのルートフォルダの意味。

これで普通にVueをビルドして実機で実行すればいい。スマホをケーブルでPCに接続し、以下のコマンドを実行する。

yarn build
cordova run android