vuejs vue-router 不适用于 Firebase 托管

Question

我在使用 vue 路由器时遇到问题。当我单击导航栏在视图/页面之间进行更改时，网站工作正常，但是当我尝试通过域/url 直接转到特定页面时，我通过 Firebase（托管网站的位置）收到错误消息：根index.html 中不存在该文件。

以下是路由中的 index.js 文件的代码：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Courses from "../views/Courses.vue";
import LandingPageTechSession from "../views/LandingPageTechSession.vue";
import VueMeta from "vue-meta";
Vue.use(VueMeta);

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/muddy-match",
    name: "MuddyMatch",
    component: MuddyMatch,
  },
  {
    path: "/courses",
    name: "Courses",
    component: Courses,
  },
  {
    path: "/techsession",
    name: "TechSession",
    component: LandingPageTechSession,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

这是App.vue的代码：

  <div id="app">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
      integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
      crossorigin="anonymous"
    />
    <navbar></navbar>
    <router-view />
    <bottom></bottom>
  </div>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import Bottom from "./components/Footer.vue";

export default {
  name: "App",
  components: {
    Navbar,
    Bottom,
  },
};

还有导航栏项目。（课程路线是使用 router-link 但它仍然给出相同的错误）：

<template>
  <b-container fluid>
    <b-navbar toggleable="sm" id="navbar" type="light">
      <b-navbar-brand :to="{ name: 'Home' }">
        <img id="logo" src="../assets/S2Plogo.png" alt="S2Plogo" />
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" class="collapse" is-nav>
        <b-navbar-nav align="end" class=" ml-auto">
          <b-nav-item size="sm" class="navbar-item"
            ><router-link class="navbar-item" :to="{ path: 'Courses' }">{{
              $t("nav.courses")
            }}</router-link>
          </b-nav-item>
          <b-nav-item
            size="sm"
            class="navbar-item"
            :to="{ name: 'TechSession' }"
            >{{ $t("nav.techsessions") }}</b-nav-item
          >
          <b-nav-item
            size="sm"
            class="navbar-item"
            href="https://teespring.com/"
            target="_blank"
            >{{ $t("nav.merchandise") }}</b-nav-item
          >
          <b-nav-item size="sm" class="navbar-item" href="/#contact-us">{{
            $t("nav.contactus")
          }}</b-nav-item>
          <b-nav-item
            size="sm"
            v-on:click="switchLocale()"
            class="navbar-item"
            >{{ displayLocale }}</b-nav-item
          >
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </b-container>
</template>

谢谢各位前辈！

Answer 1

这个问题的答案实际上与 Vue Router 或 Vue 无关，而是与 Firebase 有关。

如果您希望能够直接浏览 url，只需在 firebase.json 中添加“rewrites”数组即可：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
}

现在你应该没有任何问题了。快乐编码！