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