vue-routerでうまくトップ画面が出てこないお話

はじめに

転職活動の時に企業に提出していたポートフォリオのフロントをVue.jsに置き換える作業を始めました。
Railsで元々作っていたものをWebAPIとして機能させ、SPA（シングルページアプリケーション）化をはかっているところです。
画面遷移にあたり、vue-routerを使用しました。
しかし、そこでトップ画面が白のまま表示されない不具合に遭遇しましたので備忘録として残したいと思います。

環境

node 14.19.3
npm 6.14.17
Vue2

vue-routerとは

Vue Router はVue.jsの公式ルーターです。Vue.js コアと深く統合して、Vue.js を使用したシングル ページ アプリケーションの構築を簡単にします。

vue-routerを導入することで、画面遷移を簡単にすることができます。

課題

画像のみトップ画面に表示するようにしたいが、白い画面のままになっていることです。

コンソール上にエラーが表示されています。

現状

現状のコードは次のとおりです。

main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import vuetify from "./plugins/vuetify";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,

  render: function (h) {
    return h(App);
  },
}).$mount("#app");

router.js

import VueRouter from "vue-router";
import HomePage from "./components/HomePage";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: HomePage,
  },
];

const router = new VueRouter({
  mode: "history",
  routes, // short for `routes: routes`
});

export default router;

App.vue

<template>
  <v-app>
    <HeaderPage />
    <router-view />
    <FooterPage />
  </v-app>
</template>

<script>
import HeaderPage from "./components/HeaderPage.vue";
import FooterPage from "./components/FooterPage.vue";
export default {
  name: "App",

  components: { HeaderPage, FooterPage },
};
</script>

<style></style>

HomePage.vue

<template>
  <v-img
    v-bind:src="require('@/assets/junior-highschool.png')"
    width="100vw"
    height="100vh"
  ></v-img>
</template>

<script>
export default {
  name: "HomePage",
};
</script>

<style></style>

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "prettier": "prettier --write './src/**/*.{vue,js}'"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "vue": "^2.6.14",
    "vue-axios": "^3.4.1",
    "vue-router": "^4.1.4",
    "vuetify": "^2.6.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.5.1",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  }
}

仮説

記述的には問題なさそうだったので対応するバージョンを確認することにしました。

解決

vue2にはvue-router3以前のバージョンを指定しなければいけませんでした。
vue-router4のバージョンはvue3にしか対応していないようですね！

package.json

# 省略
    "vue-axios": "^3.4.1",
    "vue-router": "^4.1.4",　# ここのバージョンを3へ変更
    "vuetify": "^2.6.0",
# 省略

次のコマンドを実行してvue-router4からvue-router3へバージョンを下げます。

npm install vue-router@3

localjost:8080にアクセスしてみると

コンソール上にもエラーなくトップ画面が表示されました。

終わりに

vue-routern設定には色々な記事があり、かなり迷いましたが、無事に表示されてよかったです。
バージョン関連のエラーはすぐに見つけることがまだまだ困難です。
エラーで躓いたら、一つずつ解決していきたいと思います。

参考