Vue-Cli 3で開発したアプリケーションをGithub Pagesにデプロイする
Vue.jsでSPAアプリケーションを開発した後にGitHub Pagesにデプロイする際に詰まってしまったのでメモ。
vue.config.jsファイルを作成
プロジェクトのルートディレクトリにvue.config.jsファイルを作成します。
このファイルにデプロイするVueアプリケーションのURLの構成を設定します。
以下のように記述してください。1
module.exports = {
publicPath: '/project-name/',
outputDir: 'docs'
}
GitHub Pagesにデプロイする際はプロジェクトディレクトリ直下または/docs
にindex.html
などのビルドしたファイルを配置する必要があります。今回はoutputDir: docs
にでdocs
以下に指定します。
またpublicPath: /project-name/
を指定しないとcssなどのアセットファイルへの参照が絶対パスとなってしまいますので、こちらも併せて指定します。
ビルド
vue.config.js
を作成したら一度npm run build
でビルドを行います。
ビルド後のファイルが/docs
以下に配置されていることを確認します。
masterブランチにpush
ここまでの変更をコミットしmasterブランチにpushします。2
GitHubの設定を変更する
pushしたGitHubリポジトリを開き、Settings
タブを選択します。
下にスクロールしていくと、GitHub Pages
というセクションが見つかります。
Source
の箇所がNone
になっているので、master branch /docs folder
に変更します。
GitHub PageにアクセスするURLが表示されます。
URLにアクセスするとデプロイしたアプリケーションが動作しています🎉🎉🎉
おわりに
GitHub Pages、サーバー処理を行わない静的ページを公開するならかなり便利ですね。
参考
Author And Source
この問題について(Vue-Cli 3で開発したアプリケーションをGithub Pagesにデプロイする), 我々は、より多くの情報をここで見つけました https://qiita.com/paragaki/items/4b4e1171f2265ad807bc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .