Question

因此，我想用新的Polymer应用程序做的第一件事是部署到现有网站上的目录。似乎唯一有用的就是部署到root /。

让我们以商店为例。我这样做：

polymer init并选择商店
polymer build
Robocopy.exe .\build\bundled\ C:\inetpub\wwwroot\p\ /MIR
start http://localhost/p/

你在Windows上看到了我。我认为使用IIS是无关紧要的，因为我只依靠服务器来提供静态内容。

我需要在商店模板中修改哪些内容才能使其在网址http://localhost/p/上有效？

Answer 1

Polymer-cli创建的应用程序假设从根级别'/'提供服务。在生成的项目index.html中，您会找到两条评论

<!--

      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文件中您注释掉了base代码，并将window.Polymer rootPath设置为类似'/0/polymer-test/build/es5-bundled/'的内容，您就可以在应用http://localhost/0/polymer-test/build/es5-bundled/上导航1}}

Answer 2

Polymer shop-app假设它将部署在服务器根目录上。因此，它具有硬编码的所有链接和路由。

这意味着您必须更改以下所有内容：

页面之间的所有绝对链接
pattern元素中的所有app-route参数（useHashAsPath = true时不需要这样做），
所有绝对导入，包括通过importHref，
更新服务工作者中的绝对位置（使用here）和
对静态内容（CSS，图像，JS文件）的所有引用

我猜你的主要目标不是移植shop-app，而是将来证明你自己的应用程序，以便它也可以部署到服务器上的非root位置。

为此，我将提到两种方法，具体取决于您对useHashAsPath元素使用的app-location值。此设置默认为false，这意味着您必须使用完整网址，而不是 hashbang 等效网址。

场景1 ：useHashAsPath = true

这是两种方法中最简单的方法，因为您只需将页面之间的所有网址视为绝对链接。例如：<a href="#/tabs/">Tabs</a>。

下一步是引用所有静态内容并通过相对链接导入。

最后一步是更新您的服务工作者，如图here所示。

场景2 ：useHashAsPath = false

如果您不喜欢 hashbang 网址，请转到此方案。你可以弄清楚，这种方法有点困难，但仍然可以管理（特别是从头开始）。

首先，应仍然使用绝对链接，因为复杂路由方案之间的相对链接可能很快导致问题（例如，当并非所有页面都位于同一目录级别时）。

但由于绝对链接是不可行的，因此您必须在构建时添加一些额外的预处理。重点是为所有链接添加前缀，例如__ROOT__，然后将所有这些值替换为您的实际文档根。这些链接看起来像这样：

<a href="__ROOT__/some/page">Some page</a>

您可以使用gulp-replace或类似内容将__ROOT_替换为所有源文件中的/your-document-root，以便生成以下内容：

<a href="/your-document-root/some/page">Some page</a>

此时，您已修复链接。但这只是问题的一部分。您还必须对所有app-route元素应用相同的修复。例如：

<app-route pattern="__ROOT__/some/page" [...]></app-route> // Other parameters ommited

与其他资源（如图像和CSS文件）一样，您也可以将它们包含为绝对链接并添加__ROOT__前缀，但我建议不要使用相对路径。

最后一步是更新您的服务工作者，如图here所示。

详细了解路由：https://www.polymer-project.org/1.0/blog/routing

将聚合物应用程序提供给/不在根目录的路径

2 个答案: