页面刷新使用Polymer Firebase返回404error(无法找到路由页面)

时间:2017-01-30 19:42:08

标签: javascript firebase routing polymer polymer-1.0

在我目前的Polymer& amp; amp; amp; Firebase我遇到的问题是,在页面刷新时,我的路由页面都没有找到404。 我创建了一个产生相同错误的新项目,并用firebase托管它。

我使用谷歌身份验证,并在成功注册后加载我的应用程序,这基本上是Polymer stater-kit。我相信问题是我的页面/项目的结构。因为my-app只是我站点的网关,它保存了路由和相应的页面。 我在下面添加了一张图片来解释我的项目是如何构建的。我还在控制台中添加了源代码的图片。路由到页面时的页面和页面重新加载时的页面。

如果有人有时间看这个

,我真的很感激

我的项目结构图片 Project structure

我的控制台图片
enter image description here enter image description here

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>

1 个答案:

答案 0 :(得分:1)

根据我的理解,您不会在服务器级别重写您的URL。因此,当您从主页移动到其他路线时,它可以工作,但如果您希望在不通过主页的情况下到达特定页面,则会失败,因为服务器不知道您正在谈论的路线

如果您使用// Build a list with items var items = new List<Item>(); // For example get from database continentals. var gets = _connection.Continentals; items.Add(new Item("--- Select a continental. ---", 0)); foreach (var get in gets) { items.Add(new Item(get.name.Length > 40 ? get.name.Substring(0, 37) + "..." : get.name, Convert.ToInt32(get.id))); } // Bind combobox list to the items comboBox1.DisplayMember = "Name"; // will display Name property comboBox1.ValueMember = "Value"; // will select Value property comboBox1.DataSource = item; // assign list (will populate comboBox1.Items) // Will select Africa comboBox1.SelectedValue = 3; ,则可以在firebase serve中指定此网址后重命happen like so

firebase.json

根据您的配置,您可能需要更改上面的值。但重点是{ "database": { "rules": "database.rules.json" }, "hosting": { "public": "app", "rewrites": [{ "source": "**", "destination": "/index.html" }] } } 部分。

另一种方法。

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

rewrites

我不知道你最终将如何部署你的应用,但最重要的可能是重写网址。