咨询：在IIS 10中用URL Rewrite修改Angular 7子应用图片路径

嘿，我之前在把Angular子应用部署到IIS作为二级项目的时候，也碰到过一模一样的静态图片路径问题，刚好能给你一套可行的URL Rewrite规则方案，帮你搞定这个麻烦。

首先得确认你的IIS 10已经装了URL Rewrite模块——要是没装的话，直接打开IIS管理器，在“模块”里看看有没有，没有的话从IIS的官方扩展库（服务器管理器的添加角色功能里就能找到）装上就行，这个是重写规则生效的前提。

接下来，你要修改子应用部署目录下的web.config文件，添加专门的重写规则。下面是完整的配置，直接套用就行：

具体的URL Rewrite规则配置 #

打开子应用的web.config，找到<rewrite>节点（如果没有就新建一个），把下面的规则加进去：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 核心规则：匹配../../../assets开头的图片请求，重写为App/assets路径 -->
        <rule name="Rewrite Asset Image Paths" stopProcessing="true">
          <match url="^assets/(.*)$" />
          <conditions logicalGrouping="MatchAll">
            <!-- 捕捉带多级相对路径的请求 -->
            <add input="{HTTP_URL}" pattern="\.\./\.\./\.\./assets/(.*)$" />
          </conditions>
          <action type="Rewrite" url="App/assets/{R:1}" />
        </rule>

        <!-- 兜底规则：处理更复杂的多级相对路径（比如../../../../assets） -->
        <rule name="Rewrite Deep Relative Images" stopProcessing="false">
          <match url="^(.*)\.\./assets/(.*)\.(jpg|png|gif|svg)$" />
          <action type="Rewrite" url="{R:1}App/assets/{R:2}.{R:3}" />
        </rule>
      </rules>
    </rewrite>
    <!-- 保留Angular部署必需的静态文件和路由配置 -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <rewrite>
      <rules>
        <!-- Angular路由重写（如果之前有的话保留） -->
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/App/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

规则说明 #

• 第一个规则Rewrite Asset Image Paths是核心：它会捕捉请求里带../../../assets/xxx的路径，直接把它重写成App/assets/xxx，让IIS能精准定位到子应用的assets目录。
• 第二个规则Rewrite Deep Relative Images是兜底：如果你的项目里还有更深的相对路径（比如../../../../assets/xxx.png），这个规则也能自动匹配并重写，确保所有这类图片都能正常访问。

额外的优化建议 #

其实还有个更省心的办法——如果你还没打包或者可以重新打包的话，直接在Angular打包的时候指定base-href：

ng build --prod --base-href "/App/"

这样Angular会自动把所有静态资源的路径改成基于/App/的绝对路径，根本不需要URL Rewrite。不过如果已经部署好了不想重新打包，上面的重写规则完全能解决问题。

另外，配置完之后可以在IIS的URL Rewrite模块里用“测试模式”验证一下，看看规则能不能正确匹配你的图片请求，避免踩配置错误的坑。

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