【Vue.js】XSERVERにデプロイ時画面が真っ白になる

2021年2月14日2022年1月24日

どうも。みずかず(@mizukazu_1)です。

Vueのプロジェクトで作成したアプリをXSERVERにデプロイしたのですが、アクセスすると画面が真っ白になってしまいました。

恐らく同じような現象が起きている方もいると思うのでこちらに書き記しておきます。

原因

vue-routerを使用しており、なおかつデプロイ先がドメインのサブディレクトリだとこの問題が起こる可能性があります。

解決策

Routerのコンストラクタオプションにbaseというプロパティを追加します。

そこにサブディレクトリの名前を設定します。
今回はvue-testというディレクトリでした。
両サイドをスラッシュで囲むのを忘れずに。

export default new Router({
  mode: 'history',
  base: '/vue-test/',
  routes: [
    { path: '/', component: Home },
    { path: '/test', component: Test }
  ]
})