Vue.jsでFirebaseのメタタグを使用してルーティングする方法


  1. Firebaseの設定: Firebaseにプロジェクトを作成し、Firebase Hostingを有効にします。

  2. Vue Routerの設定: Vue Routerをインストールし、ルーティングを設定します。以下は例です。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 他のルートを追加
  ]
})
export default router
export default {
  metaInfo: {
    title: 'ホームページ',
    meta: [
      {
        name: 'description',
        content: 'このページはホームページです。'
      },
      // 他のメタ情報を追加
    ]
  },
  // 他のコンポーネントの設定
}
  1. Firebase Hostingの設定: Firebaseのfirebase.jsonファイルを編集し、ルートのリライトを設定します。以下は例です。
{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "",
        "destination": "/index.html"
      }
    ]
  }
}

これにより、Firebase Hostingはすべてのリクエストをindex.htmlにリライトし、Vue Routerが適切なコンポーネントを表示します。