Vue CLIのプロジェクト作成ではPWA（Progressive Web Apps）のサンプルが簡単に作れます。今回はVue CLIのインストールから、PWAサンプルプロジェクトの作成、作ったPWAをGithub Pagesで公開するまでの手順をメモしておきます。
なお前提としてNode.js環境は構築済みとします。
$ node -v
v12.18.0
$ npm -v
6.14.4プロジェクト作成
まず、以下のコマンドでVue CLIをインストールします（グローバルインストールしています）。
$ sudo npm install -g @vue/cliインストールできたら、プロジェクトを作成します。今回はvue-sampleという名前にしました。
$ vue create vue-sampleコマンドを実行すると、presetの選択を指示されます。Manually select features を選択します。
次に、Progressive Web App (PWA) Supportを選択状態にします。
後はデフォルトでEnter連打で大丈夫です。
プロジェクトが作成できたら、念のため表示を確認します。
$ cd vue-sample
$ npm run servehttp://localhost:8081/ へアクセスし、以下の画面が表示されれば大丈夫です。
表示を確認できたらGithubでリポジトリを作成して、そちらにpushしておきます。なお、リポジトリ名はGithub PagesのURLの一部として使用されます。今回はvue-sampleとしています。
Github Pagesで公開する
サンプルのアプリをGithub Pagesで公開します。公開方法はいくつかありますが、今回は、gh-pagesブランチを公開する方法を採用しました。
デプロイ用にビルドする
Github Pagesでホスティングする場合、URLがhttps://{ユーザー名}.github.io/{リポジトリ名}/ となります。一方、デフォルトの設定でビルドした場合、各種ファイル読み込み時のパスが/js/app.jsの形となっています。そのため、公開時に各種ファイルが読み込めない状態となります。
この問題を避けるため、コンフィグでpuclicPathの設定をします。プロジェクトのルートディレクトリ直下に、以下の内容でvue.config.jsを作成します。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/vue-sample/'
: '/'
}コンフィグが準備できたらビルドします。
$ npm run buildビルドできたら、dist/index.htmlの中身を確認してみます。すると、パスが/vue-sample/js/app.jsの形になっています。これでGithub Pagesで公開した場合に正常に動作するようになります。
gh-pagesを使用して公開する
ビルドしてできたファイル（distディレクトリ下）を公開します。gh-pagesというツールを使用します。以下でインストールします。
$ npm install gh-pages --save-devインストールできたら、package.jsonのscriptsに"deploy": "gh-pages -d dist"を追記します。scripts部分を抜き出すと以下のようになります。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "gh-pages -d dist"
},準備できたら、デプロイしてみます。
$ npm run deployこれで、distディレクトリの中身がgh-pagesブランチとしてリポジトリに存在する状態となります。
Github Pagesで確認する
https://{ユーザー名}.github.io/{リポジトリ名}/にアクセスして確認します（URLはリポジトリのSettingsでも確認できます）。
正常に表示が確認出来たら、せっかくなのでインストールしてみます。アドレスバーの+マークをクリックすることでインストールできます。
インストールすると、デスクトップにショートカットが作成され、起動すると上のように独立したウィンドウでアプリが開きます。
まとめ
Vue CLIでPWAのサンプルを作って、Github Pagesで公開してみました。今回はアプリ部分は一切触っていませんが、これを雛型にすれば、簡単に独自のアプリが作れて便利だと思いました。