如何通过web.config在静态Web应用中托管多个独立SPA

问题背景 #

你有一个包含根目录SPA和多个子目录SPA的静态站点，结构如下：

index.html
main.js
main.css
App1/
    index.html
    main.js
    main.css
App2/
    index.html
    main.js
    main.css

之前用Express时，核心逻辑是对任意请求路径，返回该路径所在目录下的index.html（比如请求/app1/dashboard时返回App1/index.html），现在需要把这个逻辑转换成IIS的web.config配置。

修改后的web.config配置 #

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <!-- 确保静态资源能正常被访问 -->
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
    <rewrite>
      <rules>
        <!-- 规则1：处理根目录SPA的路由 fallback -->
        <rule name="Root SPA Fallback" 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="/index.html" />
        </rule>

        <!-- 规则2：处理子目录SPA的路由 fallback -->
        <rule name="Subdirectory SPA Fallback" stopProcessing="true">
          <match url="(.+)/.+" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- 确保对应子目录存在index.html -->
            <add input="{DOCUMENT_ROOT}/{R:1}/index.html" matchType="IsFile" />
          </conditions>
          <action type="Rewrite" url="{R:1}/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

配置说明 #

• 静态资源处理：<staticContent>块确保JS、CSS等静态文件的MIME类型正确，避免IIS返回404。
• 根目录SPA规则：匹配没有斜杠的路径（如/dashboard），当请求的不是文件或目录时，重写到根目录的index.html。
• 子目录SPA规则：匹配包含斜杠的路径（如/app1/dashboard），提取出第一个斜杠前的目录名（{R:1}对应App1），先检查该目录下是否存在index.html，如果存在且请求的不是文件/目录，就重写到该子目录的index.html，和你原来Express里path.dirname(req.path)的逻辑一致。

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