ポリマーshop-app
はサーバールートに展開されるものとします。したがって、その仮定にハードコードされているすべてのリンクとルートがあります。
これを使用すると、次のすべて変更する必要がありますことを、意味します、ページ間の
- すべて絶対リンクを
app-route
要素内のすべてのpattern
パラメータ (これは必要がない場合
useHashAsPath = true
)、
importHref
、
- を介してすべてのアブソリュートインポートを含む絶対的なインポートは、サービスワーカーの絶対的な場所を更新します(hereからの指示を使用)。
- 静的なコンテンツへのすべての参照(CSS、画像、JSファイル)
私はあなたの主な目標はshop-app
を移植されていないのではなく、それができるように、将来は独自のアプリを校正推測していますサーバー上のルート以外の場所にも展開できます。
この場合、app-location
要素に使用する値はuseHashAsPath
の2つです。この設定のデフォルトはfalse
です。つまり、hashbangの代わりに完全なURLを使用する必要があります。
シナリオ1:useHashAsPath = true
あなたは、単に絶対リンクなど、ページ間のすべてのURLを扱うので、これは、両方のアプローチの最も簡単です。例:<a href="#/tabs/">Tabs</a>
。
次の手順では、すべての静的コンテンツとインポートを相対リンクを介して参照します。
最後に、hereのようにサービスワーカーを更新します。
シナリオ2:
あなたはhashbang URLを嫌う場合は、このシナリオのために行きます。あなたが理解できるように、このアプローチはもう少し難しいですが、(特にあなたが最初から始めるときは)管理しやすいです。
は、複雑なルーティングスキーム間の相対リンクが問題を迅速に引き起こす可能性があるため(たとえば、すべてのページが同じディレクトリレベルにない場合など)、絶対リンクを使用する必要があります。
ただし、絶対リンクは使用しないため、作成時に追加の前処理を追加する必要があります。ポイントはすべてのリンクに例えば__ROOT__
と接頭辞を付けて、それらの値をすべて実際のドキュメントルートに置き換えることです。リンクは、その後、何か次のようになります。
<a href="__ROOT__/some/page">Some page</a>
そして、あなたはこのような何かを生成するために、ソースファイルのすべてにわたって/your-document-root
で__ROOT_
を交換するgulp-replace
または類似のものを使用します。
<a href="/your-document-root/some/page">Some page</a>
をこの時点で、あなたのリンクは固定されています。しかし、これは問題の一部にすぎません。同じフィックスをすべてのapp-route
エレメントに適用する必要があります。たとえば:画像やCSSファイルなどの他のリソースと同様に、
<app-route pattern="__ROOT__/some/page" [...]></app-route> // Other parameters ommited
は、あなたも絶対リンクとしてそれらを含めると__ROOT__
接頭辞を追加し、私はこれに対して助言すると、むしろ相対パスを使用することができます。
最後に、hereのようにサービスワーカーを更新します。
ルーティングについて詳しく読む:https://www.polymer-project.org/1.0/blog/routing
'polymer build'の' --base-path'コマンドラインオプションは利用できません。 –