使用基本 URL 在 Web 服务器上托管 Polymer 应用程序

Question

如果我选择 Polymer starter kit，它在本地运行良好。我可以导航到 http://localhost:8080/，所有指向 3 个视图的链接都可以正常工作。

现在，如果我在 URL（例如 http://myservername:8080/mywonderfulapp/）上的 Web 服务器（与其他应用程序共享）上托管此应用程序，我会遇到路由问题。有没有办法我可以提及应用程序路由以接收亲戚 URL?

我尝试更改 html 文件以具有相对 URLs

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

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

SO 上的所有类似问题似乎都是关于 1.0 之前版本的 Polymer，并提到 page.js 和 hash-bang 路由而不是 HTML5-history-friendly URLs 和应用程序路由组件。

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

相同的代码在本地和远程主机上都有效
该应用程序不依赖于托管它的基础 URL - 因此，最好我不必在代码。

Answer 1

如评论中所述，这已在 Whosebug 上的类似帖子中解决。com/questions/39608956/polymer-error-on-reload‌ ing

firebase 用户的旁注 - 如果您将相同版本的初学者工具包部署到 firebase 并在 CLI 中执行 firebase 服务，则此问题甚至会发生在本地主机中，因此您将需要上述修复，即使对于那里。

Answer 2

到目前为止我最接近的是：

在 app-route 模式中提及 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/，但至少在部署到我的远程时我不必再修改代码网络服务器。

使用基本 URL 在 Web 服务器上托管 Polymer 应用程序

Hosting Polymer app on web server with base URLs

polymer

polymer-1.0

relative-path

polymer-starter-kit