vue-routerのgithub-pages用簡易設定

vuejsのサンプルをgithub-pagesで作っていた時にvue-routerの設定でちょっと困ったのでメモ

vue-routerの基本の設定の場合、URLの”#”を表示させないために

export default new Router({　mode: 'history',・・・・・

といった具合にmode変えてると思いますが、このままgithub-pagesに上げるとURLを正しく認識されなくてページが正しく表示されなくなってしまうかと思います。

ページのルートとなるURLをうまく設定してあげないといけないので

重要なのはココですね→base: process.env.NODE_ENV === 'production' ? 'VueSample/' : '',

プロセスが npm run serve ならdevなので特別な設定はせず、

npm run buildが実行された時はベースのURLにgithub-pagesのレポジトリ名を指定してあげるようにします。

要は１行足せば実行環境に応じて設定を変えられますよ〜ってお話。

ちなみに開発環境は以下の通り

Tech-Life-Note