页面刷新 returns Polymer Firebase 出现 404 错误（找不到路由页面）

Question

在我当前使用 Polymer & Firebase 的项目中，我遇到了一个问题，即在页面刷新 none 时，我的路由页面被找到 404。我创建了一个产生相同错误的新项目并使用 firebase 托管它。

我使用 google 身份验证，并在成功注册后加载我的应用程序，它基本上是 Polymer stater-kit。我认为问题出在我的 pages/project 的结构上。因为 my-app 只是通往 my-site 的网关，它包含路由和相应的页面。我在下面添加了一张图片来解释我的项目的结构。我还在我的控制台中添加了源图片。路由到页面时一个，页面重新加载时一个。

如果有人能抽空看一下我将不胜感激

我的项目结构图

我的控制台图片

firebase.json 文件

{
  "database": {
  "rules": "database.rules.json"
  },
  "hosting": {
  "public": "public"
  }
}

firebase.json 我的实际项目中的文件有同样的问题

{
  "database": {
  "rules": "database.rules.json"
  },
  "hosting": {
  "public": "public",
  "rewrites": [
    {
    "source": "**/!{*.*}",
    "destination": "/index.html"
    }
    ]
  }
 }

我的代码 index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>polyfire</title>
  <link rel="import" href="my-app.html">
  <style media="screen">
   body {
    font-family: Roboto, Arial, sans-serif;
   }
  </style>
 </head>
 <body>
  <my-app></my-app>
 </body>
</html>

我的代码-app.html

<link rel="import" href="my-login.html">
<link rel="import" href="my-site.html">

<dom-module id="my-app">
 <template>
  <style>
    :host {
      display: block;
    }
  </style>

  <firebase-app
    auth-domain="firebaseapp.com"
    database-url="firebaseio.com"
    api-key="..."
    storage-bucket="gs://yole.appspot.com">
  </firebase-app>

  <firebase-auth user="{{user}}"></firebase-auth>

  <template is="dom-if" if="[[!user]]">
    <my-login></my-login>
  </template>

  <template is="dom-if" if="[[user]]">
    <my-site></my-site>
  </template>

</template>

<script>
  Polymer({
    is: 'my-app',
    properties: {},
  });
</script>

我的代码-login.html

<dom-module id="my-login">
<template>
  <style>
    :host {
      display: block;
    }
  </style>

  <firebase-auth
    id="auth"
    user="{{user}}"
    status-known="{{statusKnown}}"
    provider="google"
    on-error="handleError"></firebase-auth>

  <paper-button class="logInOutBtn" raised on-tap="login" hidden$="[[user]]">Sign-up with Google</paper-button> 
  <paper-button class="logInOutBtn" raised on-tap="logout" hidden$="[[!user]]">Sign-out</paper-button>

</template>

<script>
  Polymer({
    is: 'my-login',

    properties: {
      user: {
        type: Object,
      },
      statusKnown: {
        type: Object,
      }
    },
    login: function() {
      this.$.auth.signInWithPopup();
    },
    logout: function() {
      this.$.auth.signOut();
    },

  });
</script>
</dom-module>

Answer 1

据我了解，您不会在服务器级别重写 URL。因此，当您从主页移动到其他路由时，它可以工作，但是如果您希望不经过主页就到达特定页面，它就会失败，因为服务器不知道您在说什么路由.

如果你使用firebase serve，你可以让URL在firebase.json中指定后重写happen like so:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "app",
      "rewrites": [{
        "source": "**",
        "destination": "/index.html"
    }]
  }
}

根据您的配置，您可能需要更改以上值。但重点是rewrites部分。

另一种方法。

如果您使用 Gulp 之类的东西来为您的网站提供服务，您可能还想看看如何在该级别进行 URL 重写。 See this for a complete 图片，简而言之：

gulp.task('serve', function() {
    browser.init({
        server: 'app/',
        port: port,
        middleware: [historyApiFallback()] // See link above for details
    });
    .....
});

我不知道您最终将如何部署您的应用程序，但底线可能是重写 URLs。

页面刷新 returns Polymer Firebase 出现 404 错误（找不到路由页面）

Page refresh returns a 404error with Polymer Firebase (can't find routed page)

javascript

routing

firebase

polymer

polymer-1.0