1. okada3333

    Posted

    okada3333
Changes in title
+Vue CLIプロジェクトをGitHub Pagesで公開する方法
Changes in tags
Changes in body
Source | HTML | Preview

GitHub Pagesは、gh-pagesを使うと自動で楽ですが、使わなくてもできます。

GitHub Pagesを設定する

Githubで設定します。

https://github.com/[アカウント名]/[リポジトリ名]/settings のGitHub Pagesにある設定を変えます。
Danger Zoneの上辺りにあります。

image.png
mainブランチのdocsを選択して、「Save」ボタンを押します。

Vueプロジェクトのbuild先をdocsディレクトリにする

Vue CLIで作成したプロジェクトのルートにvue.config.jsを作成して、以下のようにします。

module.exports = {
  outputDir: 'docs',
  publicPath: './'
}

Vueプロジェクトをbuildしてリモートへpush

vue.config.jsを保存したら、ローカルでbuildします。

$ npm run build

buildディレクトリにファイルが書き出されるので、ファイルをコミット&mainブランチへpushします。

リモートリポジトリに反映されると、https://[アカウント名].github.io/[リポジトリ名]/で開けるようになります。

私の場合は、↓です。
https://okadamari.github.io/chat/