Vue js 在 firebase 上部署时找不到页面

Question

我正在构建一个愚蠢的网络应用程序来与我的朋友做一些有趣的事情。我正在使用 firebase 托管服务和 discord oauth2。当尝试通过在 url 上键入“/login”页面或在 discord link 上按“授权”后尝试访问“/login”页面时会出现问题。您可以在此处尝试：https://pelata-gambling.web.app/（或查看下图），单击绿色按钮，然后单击蓝色按钮。您最终会进入 404 默认页面。因此，“/login”页面只有在您按下第一个绿色按钮时才能访问，而您无法从其他任何地方访问它。我只是不明白这是怎么发生的。当运行在本地运行应用程序（使用 npm 运行 dev）并且确实按预期工作时，这不会发生。

这是您应该按下绿色按钮的着陆页

这是“错误”页面，您只能通过上一页访问该页面

如果您尝试通过查找 url https://pelata-gambling.web.app/login 来访问该页面，您最终会以某种方式返回 404。

这些是代码片段（如果您需要更多，请告诉我）：

路由器：

import Vue from 'vue'
import Router from 'vue-router'
import homepage from '../views/HomePageView.vue'
import discordlogin from '../views/DiscordLoginView.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'homepage',
      component: homepage
    },
    {
      name: "discordlogin",
      path: "/login",
      component: discordlogin
    }
    
    
  ]
})

Discord登录页面（第二页，无法访问的那一页）：

<template>
  <div>
    <section class="vh-100 gradient-custom">
      <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
          <div class="col-12 col-md-8 col-lg-6 col-xl-5">
            <div class="card bg-dark text-white" style="border-radius: 1rem;">
              <div class="card-body p-5 text-center">

                <div class="mb-md-5 mt-md-4 pb-5">

                  <h2 class="fw-bold mb-2 text-uppercase">Registrati con Discord</h2>
                  <p class="text-white-50 mb-5">Sarai rindirizzato a discord</p>





                  <button @click="discordLink()" class="btn btn-outline-light btn-lg px-5" type="submit">Registrati <img
                      src="../assets/images/discord-ico.png"></button>

                  <div class="d-flex justify-content-center text-center mt-4 pt-1">
                    <a href="#!" class="text-white"><i class="fab fa-facebook-f fa-lg"></i></a>
                    <a href="#!" class="text-white"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
                    <a href="#!" class="text-white"><i class="fab fa-google fa-lg"></i></a>
                  </div>

                </div>

                <div>
                  <p class="mb-0">Having problems? <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                      class="text-white-50 fw-bold">I don't care! LMAO</a>
                  </p>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "discordlogin",
  data() {
    return {}
  },
  methods: {
    discordLink() {
      window.location.replace(window.location.hostname === "localhost" ?
        "https://discord.com/api/oauth2/authorize?client_id=972163681175611&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin&response_type=code&scope=identify%20email%20guilds%20guilds.members.read" :
        "https://discord.com/api/oauth2/authorize?client_id=972163681175611&redirect_uri=https%3A%2F%2Fpelata-gambling.web.app%2Flogin&response_type=code&scope=identify%20email%20guilds%20guilds.members.read"
      )
    }
  },
  async mounted() {
    var qs = require('qs');
    const urlParams = new URLSearchParams(location.search);
    const code = urlParams.get("code")


    console.log(code)
    var data = qs.stringify({
      'client_id': '***',//removed for Whosebug
      'client_secret': '***',
      'grant_type': 'authorization_code',
      'redirect_uri': `${window.location.origin}${window.location.pathname}`,
      'code': code
    });
    var config = {
      method: 'post',
      url: 'https://discord.com/api/oauth2/token',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'

      },
      data: data
    };

    axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });

  },
}
</script>

<style>
.btn.btn-outline-light {
  background-color: #5865F2 !important;
  border: 0px !important
}

.btn.btn-outline-light:hover {
  background-color: white !important;
  border: 0px !important
}
</style>

感谢所有努力提供帮助的人

编辑：我从路由器配置中删除了 mode: 'history'，现在似乎可以工作了，但它仍然很奇怪

Answer 1

单击绿色按钮时，您的浏览器会发送 HTTP POST Request 到 discord 的 oauth api。

这就是页面中显示的内容。

"/login"是假的，通过js trickery推入/static/js/app.7ad2bbe6ea8f108e3c9a.js

顺便说一句，即使它确实存在，只将它提供给 POST 请求也是合法的（所以 404 将 return 如果有人试图通过 GET 访问它。）

Answer 2

从路由器配置中删除 mode: 'history' 解决了我的问题，但我不知道这是否是一个好的解决方案

Vue js 在 firebase 上部署时找不到页面

Vue js can't find page when deployed on firebase

javascript

firebase

vue.js

vue-router

firebase-hosting