More than 5 years have passed since last update.

Vue.jsでつくったSPAをGitHub Pagesで公開する

Posted at 2019-01-24

SPA作った！けど…

Herokuにデプロイしたらエラーが出て解決策もよくわからなかった。
調べてみるとGitHub PagesでもSPA公開できるみたいだからそっちでやってみようということになりました。
ちょっと詰まったことがあったのでメモとして残しておきます。
間違い等ありましたら教えていただけると幸いです。

Vue CLI v3.3.0
yarn v1.13.0

デフォルトでvue.config.jsはないのでプロジェクトディレクトリ直下に作成します。
参考にしたサイト：https://cli.vuejs.org/config/#global-cli-config

vue.config.js

module.exports = {
  publicPath: "./",
  assetsDir: "",
  outputDir: "dist"
}

gh-pagesというツールを使ってデプロイします。

$ yarn add gh-pages --dev

インストール後、package.jsonを書き換えます。

package.json

{
  //省略
  "scripts": {
    "deploy": "gh-pages -d dist" // 追加
  }
  //省略
}

その後yarn buildしてyarn deployをする。

リモートリポジトリの設定画面に行き、画像のようにgh-pages branchを選択する。

これで反映に時間がかかりますが(私の場合)ちゃんと公開することができました。