页面刷新返回Polymer Firebase的404错误（找不到路由的页面）

Question

在我当前的Polymer＆Firebase项目中，我遇到的问题是，在页面刷新时，找不到任何路由页面404。我创建了一个产生相同错误的新项目，并将其托管在firebase中。

我使用Google身份验证，并且在成功注册后加载了我的应用程序，该应用程序基本上是Polymer stater-kit。 我认为问题出在我的页面/项目的结构上。 因为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>

my-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>

my-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 ：

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

根据您的配置，您可能必须更改上面的值。 但是重点是rewrites部分。

另一种方法。

如果您使用类似Gulp这样的网站来服务您的网站，那么您可能也想看看如何在该级别进行URL重写。 完整了解一下，但总之：

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

我不知道您最终将如何部署应用程序，但最重要的是重写URL。

页面刷新返回Polymer Firebase的404错误（找不到路由的页面）

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-30 20:06:04

页面刷新返回Polymer Firebase的404错误（找不到路由的页面）

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-30 20:06:04

解决方案1
1 已采纳 2017-01-30 20:06:04