Nuxt.jsで作成したWebサイトを簡単にCordovaアプリ化する方法【ホームページを簡単アプリ化】

お題通りですが、ホームページを簡単にアプリ化できたら楽ですよね！

って事で、僕は普段のWeb開発にはNuxt.jsをよく使うのですが、今回自分が運営している結婚式ムービー制作のLoveYou(ラブユー)というサイトをNuxt.jsとCordovaを使って簡単にアプリ化したのでやり方を紹介します。

サクッとリリースしたiOSアプリはこちら → LoveYou-結婚式ムービー作成 iTunesが開くかも。

ちなみに、結婚式ムービー制作のLoveYou(ラブユー)のサイトは、Nuxt.js + Contentful + Firebase + Heroku で構築しました。

いわゆるオレオレCMSです！

あ、結婚式挙げられる方はムービー作りますのでご注文お待ちしております♪ ←PR

本題: nuxt.config.jsの設定

アプリ化するには、nuxt.config.jsのルーティング周りを次のように設定しました。

/*
 # 必要部分以外は省略してます.
*/
module.exports = {
  head: {
    script: [
      {src: 'cordova.js'} // cordova.jsを読み込みます.
    ]
  },
  build: {
    publicPath: '/nuxt/' // デフォルトの、'/_nuxt/'ではCordovaのWebViewが読み込まないので変更してやります.
  },
  router: {
    mode: 'hash' // ルーティングをハッシュモードに.
  },
  mode: 'spa' // アプリでは起動後、ルートから始まるのでspaモードにします.
};

package.jsonのscriptsにgenerateコマンドを設定して楽ちんビルド設定

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "node ./server/app.js",
    "generate": "nuxt generate && rsync -r --delete dist/ app/www/ && replace '/nuxt/' 'nuxt/' app/www -r",
    "cordova-run-ios": "cd app && cordova build ios && cordova run ios",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "heroku-postbuild": "npm run build",
    "deploy": "git push heroku master"
  }

yarn generate か npm run generateすると、nuxt.jsによって静的ファイルがdistに生成されるので、rsyncでapp/wwwにファイルをコピー。

replaceで生成したファイル中のsrcの値などをCordovaのWebViewが読み込めるように ‘/nuxt/’から’nuxt/’に変換してます。

ちなみに、generateコマンド中のreplaceは、yarn add replaceか、npm i replace してインストールしておきましょう。

あとは、cordova platform add ios などしてプラットフォームを追加後、cordova buildすればハイブリッドアプリが完成〜♪

楽チンでした。

以上！