【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は無効にすることにしました。
詳しい理由はよくわかりません。このブログはとりあえず動くことを目指していますから(笑)