如何配置iron-pages从app/shop-home加载组件并解决IIS路由劫持问题

我之前也碰到过类似的Polymer应用部署到IIS子路径的路由坑，结合你的情况，给你几个针对性的解决办法：

1. 配置HTML Base标签 #

这是最核心的一步，用来统一所有相对路径的基准URL。在你的index.html的<head>区域添加：

<base href="/app/">

加上这个标签后，浏览器会自动把所有相对路径的请求（比如元素导入、路由跳转）都带上/app前缀，iron-pages加载shop-home时就会请求/app/shop-home，而不是直接请求/shop-home了。

2. 给IIS配置URL重写规则 #

IIS默认会把路由路径当成物理文件路径，所以需要让它把所有非静态资源的请求都转发到index.html，让前端路由来处理。在你的应用根目录（也就是IIS里的app站点目录）创建web.config文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Polymer路由转发" stopProcessing="true">
          <!-- 排除静态资源，只转发路由请求 -->
          <match url="^(?!.*\.(html|js|css|png|jpg|gif|svg|ico)$).*$" />
          <action type="Rewrite" url="/app/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这个规则会跳过静态资源的请求，把其他所有路由请求都重写到index.html，避免IIS返回404。

3. 确认路由前缀（如果用了app-route） #

如果你用app-route管理路由，需要把路由的前缀设置为/app，确保路由解析时能正确识别子路径：

<app-location route="{{route}}" url-space-regex="^/app"></app-location>
<app-route 
  route="{{route}}" 
  pattern="/:page" 
  data="{{routeData}}" 
  tail="{{subroute}}" 
  prefix="/app"
></app-route>

4. 检查元素导入路径 #

确保shop-app里导入其他元素的路径是相对路径，比如：

<link rel="import" href="../shop-home.html">

结合base标签的设置，这个相对路径会被解析为/app/shop-home.html，正好对应IIS站点下的资源位置。

按照这几步配置后，应该就能解决IIS部署时的资源加载和路由劫持问题了。

内容的提问来源于stack exchange，提问作者ang