2017-02-07 9 views
3

新しいPolymerアプリケーションで最初にやりたいことは、既存のウェブサイトのディレクトリに展開することです。動作するように思われるのは、ルート/に展開することだけです。ポリマーアプリをルートにない/ルートに配信する

ショップの例を見てみましょう。私が行います

  1. polymer init店舗
  2. あなたは、私がWindows上でよ参照
  3. polymer build
  4. Robocopy.exe .\build\bundled\ C:\inetpub\wwwroot\p\ /MIR
  5. start http://localhost/p/

を選択してください。静的なコンテンツを提供するためだけにサーバーに依存しているので、IISの使用は無関係であると私は考えています。

URLがhttp://localhost/p/で動作するようにするには、ショップテンプレートで何を編集する必要がありますか?

答えて

2

をポリマー-cliを作成したアプリケーションは、ルートレベル '/' から提供を想定して来ました。あなたはアプリでナビゲートすることができるようになります。このindex.htmlファイルにあなたが'/0/polymer-test/build/es5-bundled/'のようなものにwindow.Polymer rootPathbaseタグをコメントアウトして設定した場合は生成されたプロジェクトでは、2件のコメント

<!-- 
 

 
     The `<base>` tag below is present to support two advanced deployment options: 
 
     1) Differential serving. 2) Serving from a non-root path. 
 
    
 
     Instead of manually editing the `<base>` tag yourself, you should generally either: 
 
     a) Add a `basePath` property to the build configuration in your `polymer.json`. 
 
     b) Use the `--base-path` command-line option for `polymer build`. 
 
    
 
     Note: If you intend to serve from a non-root path, see [polymer-root-path] below. 
 

 
--> 
 
    <base href="/"> 
 
<!-- ... --> 
 

 
<script> 
 
    /** 
 
    * [polymer-root-path] 
 
    * 
 
    * By default, we set `Polymer.rootPath` to the server root path (`/`). 
 
    * Leave this line unchanged if you intend to serve your app from the root 
 
    * path (e.g., with URLs like `my.domain/` and `my.domain/view1`). 
 
    * 
 
    * If you intend to serve your app from a non-root path (e.g., with URLs 
 
    * like `my.domain/my-app/` and `my.domain/my-app/view1`), edit this line 
 
    * to indicate the path from which you'll be serving, including leading 
 
    * and trailing slashes (e.g., `/my-app/`). 
 
    */ 
 
    window.Polymer = {rootPath: '/'}; 
 
    // ...  
 
    
 

 
</script>

を見つけるでしょうindex.html on http://localhost/0/polymer-test/build/es5-bundled/

+0

'polymer build'の' --base-path'コマンドラインオプションは利用できません。 –

3

ポリマーshop-appはサーバールートに展開されるものとします。したがって、その仮定にハードコードされているすべてのリンクとルートがあります。

これを使用すると、次のすべて変更する必要がありますことを、意味します、ページ間の

  • すべて絶対リンクを
  • app-route要素内のすべてのpatternパラメータ
  • (これは必要がない場合 useHashAsPath = true)、
  • importHref
  • を介してすべてのアブソリュートインポートを含む絶対的なインポートは、サービスワーカーの絶対的な場所を更新します(hereからの指示を使用)。
  • 静的なコンテンツへのすべての参照(CSS、画像、JSファイル)

私はあなたの主な目標はshop-appを移植されていないのではなく、それができるように、将来は独自のアプリを校正推測していますサーバー上のルート以外の場所にも展開できます。

この場合、app-location要素に使用する値はuseHashAsPathの2つです。この設定のデフォルトはfalseです。つまり、hashbangの代わりに完全なURLを使用する必要があります。

シナリオ1useHashAsPath = 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

関連する問題