-
Firebaseの設定: Firebaseにプロジェクトを作成し、Firebase Hostingを有効にします。
-
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: 'このページはホームページです。'
},
// 他のメタ情報を追加
]
},
// 他のコンポーネントの設定
}
- Firebase Hostingの設定: Firebaseの
firebase.json
ファイルを編集し、ルートのリライトを設定します。以下は例です。
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "",
"destination": "/index.html"
}
]
}
}
これにより、Firebase Hostingはすべてのリクエストをindex.html
にリライトし、Vue Routerが適切なコンポーネントを表示します。