More than 3 years have passed since last update.

Vue CLIプロジェクトをGitHub Pagesで公開する方法

Last updated at 2021-04-29Posted at 2021-03-13

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

GitHub Pagesを設定する

Githubで設定します。

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

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

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

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

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

$ npm run build

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

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