vuejs vue-router 不适用于 Firebase 托管

Posted 2023-02-22

【中文标题】vuejs vue-router 不适用于 Firebase 托管

【英文标题】：vuejs vue-router isn't working with Firebase hosting

【发布时间】：2021-09-09 15:19:11

【问题描述】：

我在使用 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"  />
      </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>

谢谢各位前辈！

【问题讨论】：

是的，因为它直接在服务器上查找 URL（资源）。它不涉及应用程序的内部路由。您是否尝试过哈希定位策略？

@AbhinavKumar 尝试过，但似乎效果不佳。它重定向到“/”路由。

【参考方案1】：

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

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

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

您现在应该没有任何问题。 编码愉快！