1

Polymer 100% アプリであり、Firebase を搭載したアプリケーションでかなりの URL を使用するのに問題があります。これは、Polymer Starter Kit 1.2.0 に基づいています。

ルートにアクセスしたいlocalhost:5000/user/edit。ホームページ (localhost:5000) でボタンをクリックすると、href="/user/edit"正常に動作します。しかし、ホームページを経由せずにルートに直接行った場合のページを更新すると"/user/edit"、ファイルの検索に関する多くの問題が表示されます。コンソールには次のように表示されます。

edit:36 GET http://localhost:5000/user/styles/main.css  edit:37 GET
http://localhost:5000/user/styles/pikaday.css  edit:41 GET
http://localhost:5000/user/bower_components/webcomponentsjs/webcomponents-lite.js
edit:45 GET http://localhost:5000/user/elements/elements.html 404 (Not
Found)

私のapp.jsファイルには次の行しかありません。

var app = document.querySelector('#app');
app.baseUrl = '/';

そして、私のrouting.htmlは次のとおりです。

<script>
window.addEventListener('WebComponentsReady', function() {

// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') {  // if production
  page.base(app.baseUrl.replace(/\/$/, ''));
}

// Routes
page('/', function() {
  app.route = 'home';
});

page(app.baseUrl, function() {
  app.route = 'home';
});

page('/user/edit', function() {
  app.route = 'user/edit';
});

page('*', function() {
  console.info('404 page');
  page.redirect(app.baseUrl);
});

// add #! before urls
page({
  hashbang: false
});
});
</script>

私は多くのことを試しました：

  • ルート/user/editをに変更すると、正常にuser-edit動作します。どうやら問題はルートの「/」に関連しているようです。
  • hashbang を true に設定すると、正常に動作します。しかし、私は自分のアプリケーションできれいな URL を動作させたいと思っています。
  • index.html でブラウザーに変更<link rel="import" href="elements/elements.html">すると、すべての要素が検出されますが、ルーティングは同じ問題で続行されます。<link rel="import" href="/elements/elements.html">

この問題を解決する方法についてのアイデアはありますか? きれいな URL を使いたいと思っている多くの人に役立つと信じています。

4

3 に答える 3

3

問題を発見しました！ドキュメントには欠けていた、firebase pretty URL の使用に関する重要な詳細がドキュメントに記載されています。

ドキュメントによると: https://github.com/PolymerElements/polymer-starter-kit/blob/master/docs/deploy-to-firebase-pretty-urls.md

重要なステップがあります: 7. Add <base href="/"> to head in index.html

ただし、詳細は、他のインポートの開始前にタグ<base href="/">を追加する必要があるということです。head問題は、これを の最後に<head>配置したことです。そのため、最初に配置して、正常に動作し始めました。

この詳細で多くの時間を無駄にした後、ドキュメントを改善するために Polymer Startet Kit に提案しました: https://github.com/PolymerElements/polymer-starter-kit/issues/670

この疑問がより多くの人々を助けることを願っています:)

于 2016-01-22T17:11:22.560 に答える
1

これはサーバー側の問題です。基本的に、pushstateサーバーで HTML5 のサポートを有効にする必要があります。Apache を使用している場合は、次の.htaccessようにファイルを編集できます。Nginx については、こちらを参照してください。

于 2016-01-22T10:27:29.360 に答える
0

app か router page.js に問題があると思います。ボタンをクリックすると、 uri/user/editがホストに追加されるためですlocalhost:5000。ただし、ページをリロードすると、ホストが表示されなくなります。まず、このセクションを削除して、もう一度やり直してください。

page(app.baseUrl, function() {
  app.route = 'home';
});
于 2016-01-22T10:53:57.083 に答える