使用基本URL在Web服务器上托管Polymer应用程序 [英] Hosting Polymer app on web server with base URLs

问题描述

如果我使用聚合物入门工具包，它会起作用当地很好. 我可以导航到 http://localhost:8080/，并且指向3个视图的所有链接都可以正常工作.

现在，如果我将此应用程序托管在URL上的Web服务器(与其他应用程序共享)上，例如 http://myservername:8080/mywonderfulapp/，我在路由方面遇到了麻烦.有什么办法可以提及应用路由以获取相对URL?

我尝试对html文件进行更改以具有相对的URL

<link rel="import" href="./src/my-app.html">
<a name="view1" href="./view1">View One</a>
<base href="/mywonderfulapp/">

但是我似乎无法以类似的方式修复应用程序路由.

此处关于SO的所有类似问题似乎都与Polymer的1.0之前版本有关，并提及page.js和hash-bang路由，而不是HTML5历史记录友好的URL和app-route组件.

我希望进行最少的代码更改以确保

• 相同的代码在本地以及在远程主机上均有效
• 该应用程序不依赖于托管该应用程序的基本URL-因此，最好不要在代码中的任何地方提及"mywonderfulapp"(来自上面的URL).

解决方案

到目前为止，我最接近的是:

在应用程序路由模式中提及URL前缀的占位符.

<app-route
    route="{{route}}"
    pattern="/:prefix/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

，然后在href属性中将其用作锚点

<a name="view1" href="/[[routeData.prefix]]/view1">View One</a>
<a name="view2" href="/[[routeData.prefix]]/view2">View Two</a>
<a name="view3" href="/[[routeData.prefix]]/view3">View Three</a>

此方法的缺点是我必须将URL用作 http://localhost:8080/mywonderfulapp/，即使在本地工作，但至少在部署到远程Web服务器时，我不再需要修改代码.

If I take the Polymer starter kit, it works well locally. I can navigate to http://localhost:8080/ and all the links to the 3 views work fine.

Now, if I host this app on a web server (that is shared with other apps) on a URL such as http://myservername:8080/mywonderfulapp/, I am having trouble with the routing. Is there a way I can mention the app-route to take in the relative URL?

I tried making changes to the html files to have relative URLs

<link rel="import" href="./src/my-app.html">
<a name="view1" href="./view1">View One</a>
<base href="/mywonderfulapp/">

but I cant seem to fix the app-routing in a similar fashion.

All similar questions here on SO seem to be about a pre-1.0 version of Polymer, and mention page.js and hash-bang routing instead of the HTML5-history-friendly URLs and the app-route component.

I would prefer to make minimal code changes to ensure

• the same code works locally as well as on the remote host
• the app is not dependent on the base URL on which it is hosted - so, preferably I dont have to mention "mywonderfulapp" (from the URL above) anywhere in the code.

解决方案

The closest I got with this so far, is to:

mention a placeholder for a URL prefix in the app-route pattern.

<app-route
    route="{{route}}"
    pattern="/:prefix/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

and then use that in the href attribute for the anchor

<a name="view1" href="/[[routeData.prefix]]/view1">View One</a>
<a name="view2" href="/[[routeData.prefix]]/view2">View Two</a>
<a name="view3" href="/[[routeData.prefix]]/view3">View Three</a>

The drawback with this approach is that I have to use the URL as http://localhost:8080/mywonderfulapp/ even when working locally, but at least I don't have to modify code anymore when deploying to my remote web server.

这篇关于使用基本URL在Web服务器上托管Polymer应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！