【メモ】vue-routerを使ったアプリで画面が真っ白になる

問題

vue.jsの画面が真っ白になって表示されない。

前提

1. vue-routerを使っている。
2. サブディレクトリにデプロイしている

TL;DR

vue-routerにbaseプロパティでサブディレクトリ(ベースURL)を教える必要がある。

もう少し詳しく説明すると/var/www/html/subdirにデプロイすることで、URLがhttps://www.example.com/subdir/がアプリケーションのトップとなる場合に、ベースURLとして、/subdir/(前後のスラッシュ必須)をvue-routerに教える必要がある。

以下のように初期化処理でbaseプロパティで教えてあげる。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path: '/',
    component: xxxxxx,
    children: [
      {
        path: '',
        name: 'top',
        component: () => import(xxxxxxx)
      },
      {
        path: '/login',
        name: 'login',
        component: () => import(xxxxxxx)
      },
    ]
  }
]

export default new Router({
  mode: 'history',
  base: '/subdir/', <-これ
  routes
})

今回は、どこに設置するかわからなかったので、baseプロパティを環境変数で設定するようにした。

例えば、baseが以下のような場合は、ベースURLの判定ができずに、ルーティングできずに画面が真っ白になる。

• /subdir ：最後のスラッシュがない
• //　：　スラッシュが２個ある。
• https://example.com/subdir/ : URLになっている

環境変数で適当に設定するようにしちゃったので、書き方が統一されなくて画面が真っ白になっていました。

一度、設定すれば問題ないので、忘れちゃいます。
自戒をこめて記載しました。