Vue CLI 3 で PWA のアプリつくって GitHubPages で公開

概要

• Vue CLI のバージョン 3 が出て，PWA とかを簡単に入れられるようになったので試しました
• GitHub Pages に上げるだけだと ガイドにも書いてある のですが，PWA への対応もしてみました

準備

Vue CLI 3 を入れる

• 2.x が入っているときは一度アンインストールしてから @vue/cli をインストール
  • 詳しくは Vue CLI のガイド を参照
• 書いた時点での Vue CLI のバージョンは 3.0.1 です

プロジェクトを作る

1. $ vue create pwa-sample を実行（pwa-sample は任意のプロジェクト名）
2. Please pick a preset と表示されるので，Manually select features を選択
3. 下のような画面になるので， PWA を選択しておく（スペースで切替）

4. 後は好きな設定でプロジェクトを作成する

GitHubPages への対応

１. ルートディレクトリに vue.config.js を作成し，次を記述

vue.config.js

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/pwa-sample/'
    : '/',
  outputDir: 'docs',
};

２. /public/manifest.json のパスを相対パスに修正

manifest.json

{
  ...
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png", //ここ
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png", //ここ
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html", //ここ
  ...
}

３. ビルドする（npm run build or yarn build）
４. GitHub に Publish する
５. GitHub の Publish 先のリポジトリの Settings の GitHub Pages の Source の項目を None → master brunch /docs folder に変更

まとめ

GitHub Pages への対応として manifest.json のパスを修正する以外は、基本的に Vue CLI が全部やってくれます。CLIすごい