本地化Angular应用IIS部署异常：根路径返回文件列表而非首页

核心问题 #

1. 根目录无默认首页文件：本地化Angular构建后，根目录没有index.html，只有各语言子目录（en/、ar/等）下存在对应语言的index.html。而你开启了IIS的directoryBrowse，所以访问根路径时，IIS会返回目录文件列表而非自动跳转。
2. Rewrite规则未覆盖根路径请求：现有规则中，最后一条匹配.*的规则，条件是{REQUEST_FILENAME}既不是文件也不是目录。但访问根路径时，请求的是根目录（属于目录请求），所以这条规则的条件不满足，不会触发重写；而当你在URL后添加任意内容时，请求不再是目录/文件，触发规则重写到fr/index.html，因此能正常加载。

解决步骤 #

1. 关闭目录浏览（可选但推荐）

修改web.config中的directoryBrowse配置，避免暴露服务器文件结构：

<directoryBrowse enabled="false" />

2. 添加根路径重写规则

在现有规则最顶部添加一条规则，专门处理根路径请求，将其重定向到默认语言的首页（比如法语fr）：

<rule name="RootRedirectToDefaultLang" stopProcessing="true">
  <match url="^$" /> <!-- 匹配空URL（根路径） -->
  <action type="Redirect" url="/fr/" redirectType="Permanent" />
</rule>

如果需要根据用户浏览器的语言偏好自动跳转，可以改用以下规则（优先匹配en、ar、pt，默认跳转fr）：

<rule name="RootRedirectByLangEn" stopProcessing="true">
  <match url="^$" />
  <conditions>
    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^en" negate="false" />
  </conditions>
  <action type="Redirect" url="/en/" redirectType="Permanent" />
</rule>
<rule name="RootRedirectByLangAr" stopProcessing="true">
  <match url="^$" />
  <conditions>
    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^ar" negate="false" />
  </conditions>
  <action type="Redirect" url="/ar/" redirectType="Permanent" />
</rule>
<rule name="RootRedirectByLangPt" stopProcessing="true">
  <match url="^$" />
  <conditions>
    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^pt" negate="false" />
  </conditions>
  <action type="Redirect" url="/pt/" redirectType="Permanent" />
</rule>
<rule name="RootRedirectToFr" stopProcessing="true">
  <match url="^$" />
  <action type="Redirect" url="/fr/" redirectType="Permanent" />
</rule>

3. 优化现有Rewrite规则

最后一条规则可以调整匹配模式，避免重复匹配已处理的语言目录：

<rule name="AngularRoutesFR" stopProcessing="true">
  <match url="^(?!en|ar|pt).*" /> <!-- 排除已配置的语言目录路径 -->
  <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
  </conditions>
  <action type="Rewrite" url="./fr/index.html" appendQueryString="false" />
</rule>

修改后的完整web.config示例 #

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <directoryBrowse enabled="false" />
    <rewrite>
      <rules>
        <!-- 根路径跳转规则 -->
        <rule name="RootRedirectToDefaultLang" stopProcessing="true">
          <match url="^$" />
          <action type="Redirect" url="/fr/" redirectType="Permanent" />
        </rule>
        <!-- 各语言路由规则 -->
        <rule name="AngularRoutesEn" stopProcessing="true">
          <match url="^en/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./en/index.html" appendQueryString="false" />
        </rule>
        <rule name="AngularRoutesAr" stopProcessing="true">
          <match url="^ar/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./ar/index.html" appendQueryString="false" />
        </rule>
        <rule name="AngularRoutesPt" stopProcessing="true">
          <match url="^pt/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./pt/index.html" appendQueryString="false" />
        </rule>
        <!-- 其他路径重写到法语首页 -->
        <rule name="AngularRoutesFR" stopProcessing="true">
          <match url="^(?!en|ar|pt).*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./fr/index.html" appendQueryString="false" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

额外说明 #

你的构建命令ng build --base-href / --configuration production是正确的，本地化构建后各语言目录的资源引用已经基于根路径。核心问题就是根路径缺少默认页的处理规则，以及IIS目录浏览的配置。

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