Vueで作成したSPAをGithubPagesでホスティングする

ディレクトリ構造

.
├── README.md
├── babel.config.js
├── docs
│   ├── 404.html
│   ├── css
│   ├── favicon.ico
│   ├── img
│   ├── index.html
│   └── js
├── github
│   ├── before_pr.md
│   ├── installation.md
│   ├── new_branch.md
│   └── tasks.md
├── image_cache.php
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── 404.html
│   ├── favicon.ico
│   └── index.html
├── readme_img
│   └── logo01.png
├── rename.php
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── mixin
│   ├── router
│   ├── store
│   └── views
└── vue.config.js

vue.config.js (publicPathを変更)

module.exports = {
  publicPath: '/{Githubのリポジトリ名}', <= ここを変更
  outputDir: 'docs',
  filenameHashing: false,
  productionSourceMap: false,
}

babel.config.js (変更無し)

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

(手順1) Githubのリポジトリを「公開」ステータスに変更 (* 無料プランの場合)

change visiblity
- make public

(手順2) Settingタブ => Optionsタブ => GitHub Pages欄

GitHub Pages

GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

Your site is ready to be published at https://{Githubアカウント名}.github.io/{リポジトリ名}/.

Source

Your GitHub Pages site is currently being built from the /docs folder in the deploy-github-pages branch. Learn more.

Theme Chooser

Select a theme to publish your site with a Jekyll theme. Learn more.
Custom domain
Custom domains allow you to serve your site from a domain other than {Githubアカウント名}.github.io. Learn more.

Enforce HTTPS

— Required for your site because you are using the default domain ({Githubアカウント名}.github.io)
HTTPS provides a layer of encryption that prevents others from snooping on or tampering with traffic to your site.
When HTTPS is enforced, your site will only be served over HTTPS. Learn more.

Source
選択肢1
- どのブランチをホスティングするか？

=> 今回は、hosting-github-pagesブランチを指定

選択肢2
- フォルダの選択
  - / (root)
  - docs

=> 今回は、docsディレクトリを指定

補足

npm run buildすると、本番環境用にソースコードがビルドされ、 docsの方に、トランスパイルされたものが生成される。