【Vue CLI3】GitHub Pagesに真っ白な画面しか表示されない時の解決策
vue-cliで作ったアプリをGithub Pagesにデプロイ - Qiita
vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話 - Qiita
このあたりを参考にVue Cli3で作成したファイルをGitHubPagesにてリリースしたかったのですが、真っ白な画面しか表示されませんでした。
以下にVue Cli2には必要がなかったものの、Vue Cli3で必要となった手順も含めて解決策をメモしておきます。
前提として、すでにVue Cliのプロジェクトが作成されているところからの説明です。
- GitHubリポジトリの作成
- config/index.jsを編集
- ！vue.config.jsの新規作成！
- mkdir docs
- npm run build
- git init 〜 git push まで
- GitHubの該当リポジトリへ
config/index.jsを編集
このあたりはこちらを参考にしました。
vue-cliで作ったアプリをGithub Pagesにデプロイ - Qiita
build: {
// Template for index.html
- index: path.resolve(__dirname, '../dist/index.html'),
+ index: path.resolve(__dirname, '../docs/index.html'),
// Paths
- assetsRoot: path.resolve(__dirname, '../dist'),
+ assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
- assetsPublicPath: '/',
+ assetsPublicPath: './',
$ mkdir docs
！vue.config.jsの新規作成！
こちらの手順がVue Cli3で必要となります。
以下のサイトを参考にしています。
Vue で作成した Web アプリを GitHub Pages で公開 - 山崎屋の技術メモ
vue.config.jsというファイルをプロジェクト直下に新規作成してください。
そしてその中に以下のコードをそのまま記述します。
module.exports = {
outputDir: 'docs',
assetsDir: './',
publicPath: './'
}
mkdir docs
後ほどnpm run buildをするのですが、その前にプロジェクト直下にdocsというディレクトリを作成しておきます。
npm run build
ビルドしましょう。
$ npm run build
git init 〜 git push まで
この辺りはお馴染みのやり方で、GitHubにpushしていきます。
