【vue-router】Vue.jsでビルドしたウェブサイトが白紙で表示される場合の対処法 【History Mode】

Vue.jsプロジェクトで実際にサーバーに載せるにあたってプロジェクトをビルドしますよね。

npm run build

それで/dist/以下に出来たファイルをサーバーに載せ、アクセスすれば作ったサイトが表示されるはずなのに、真っ白なブランクページが表示される。F12で開発コンソールを開いてみても、何のエラーも出ていない。。

という場合はvue-routerのHistory Modeをオフにしましょう。

vue-routerのHistory Modeとは

History ModeとはVueプロジェクトでブラウザのURL欄に表示されるURLを自然な形にしてくれるvue-routerの機能ですね。

History Modeあるとき。

http://www.example.com/#/index

History Mode ないとき。

http://www.example.com/index

ご覧の通り、#が取れて自然な表示になります。

vue.jsはSPAを作ることを得意としています。SPAは画面遷移を含めたアプリ全体が1枚のHTMLファイルで生成されているウェブアプリケーションなので、アプリ内で別のディレクトリに移動するといっても毎回サーバーに問い合わせを行うわけではありませんよね。そこで、この#以下のルーティングに関しては、「サーバーに問い合わせなくていいよ！」ということを表しています。

History Modeを有効にするには/src/router/index.jsを変更します。

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'

Vue.use(Router)

export default new Router({
  mode: 'history', // ★この行を追加
  routes: [
    {
      path: '/',
      name: 'Home',
      component: home
    }
  ]
})

vue-routerのHistory Modeをオフにする

しかし残念ながら、私の環境ではこのHistory Modeをオフにすると冒頭の不具合が起こったので、ハマりました。

調べた結果、History Modeを有効にするとこの現象が起こることが分かりました。 とりあえずHistory Modeは無効にすることにしました。

詳しい理由はよくわかりません。このブログはとりあえず動くことを目指していますから(笑)