Vue Cli 4で GitHubPagesに公開する方法

vue-cliで始めるVue.jsチュートリアル (1)
の記事を参考にvueをちょっくらハローワールドしてみるかと思ったら結構つまずいたので記事に残す。

作成物の
- リポジトリはこちら
https://github.com/kuimac/vue_todo_app.io
- GitHub Pagesはこちら
https://kuimac.github.io/vue_todo_app.io/

環境

$ sw_vers ProductName: Mac OS X ProductVersion: 10.15.3 BuildVersion: 19D76

$ node -v v12.1.0

npm -v 6.14.5

vue -V @vue/cli 4.3.1

目次

• 作成した時につまづいたこと
• GitHubPagesに公開した時につまづいたこと

作成した時につまづいたこと

参考記事vue-cliで始めるVue.jsチュートリアル (1)
の記事の環境が

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.11.6
BuildVersion:   15G1611

$ node -v
v6.11.3

$ npm -v
3.10.10

vue --version
2.8.2

とのことで、僕の環境と大きく違い、特にvue cliのバージョンの違いで結構つまづいた

つまづいた場所だけ抜粋すると
①　sass-loaderをインストールした後の依存関係が解消できなかった
vue initで作ると依存関係が解消できなかったからvue createで作り直したらするとうまくいった
ついでに@vue -V @vue/cli 4.3.1で構築した。←重要

②data: function()の記述をするとエラー

Failed to compile.

./src/components/HelloWorld.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/[僕の名前だよ]/Documents/code/vue_js/todo/src/components/HelloWorld.vue
  42:23  error  'event' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

原因：
ESLintのun-used-varsのルールで宣言はしているが利用していない不要な変数に対しての警告を受けている

解決：
ESLintで特定のソースコードのチェックを無効にする

の記事を参考に特定の行のみESLintを無効にする
// eslint-disable-lineを記述
function(event) { // eslint-disable-line

③npm run buildして/dist/index.htmlにアクセスすると真っ白！

Vue-CLI3でbuildすると画面が真っ白になる
の記事を参考に

module.exports = {
    baseUrl: './'
}

してもう一度npm run buildするとうまく行った。

GitHubPagesに公開した時につまづいたこと

npm run buildをすると/dist配下にファイルが作成されるが、GitHubPagesで公開するには/docs配下にコンパイルしなければいけない。

調べてみるとconfig/index.jsに設定を記述するらしいけどそんなものは無い！（笑）
解決:vue.config.jsにoutputDir: 'docs/',を記述

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

あとはGitHubのmasterブランチをWebページとして公開する手順（GitHub Pages）を参考にGitHubPagesを設定する。

無事公開できました

参考にさせていただいたもの

• vue-cliで始めるVue.jsチュートリアル (1)
• vue-cliで始めるVue.jsチュートリアル (2)
• ESLintで特定のソースコードのチェックを無効にする
• Vue-CLI3でbuildすると画面が真っ白になる
• GitHubのmasterブランチをWebページとして公開する手順（GitHub Pages）