如何隐藏IIS托管的Angular 16多语言站点URL中的en/es标识

完整根目录web.config配置 #

将以下配置替换根目录原有的web.config，它会处理自动语言匹配、路由转发以及Angular单页应用的路由需求：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 1. 直接返回已存在的文件/目录（如静态资源、语言子目录） -->
        <rule name="Existing Resources" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAny">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" />
          </conditions>
          <action type="None" />
        </rule>

        <!-- 2. 处理已带语言前缀的请求，交给对应语言的Angular应用路由 -->
        <rule name="Angular Language Routes" stopProcessing="true">
          <match url="^(en|es)/(.*)$" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/{R:1}/index.html" />
        </rule>

        <!-- 3. 匹配西班牙语优先的请求，重写到/es子目录 -->
        <rule name="Auto Rewrite to Spanish" stopProcessing="true">
          <match url="^(.*)$" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_URI}" pattern="^/$" negate="true" />
            <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" ignoreCase="true" />
          </conditions>
          <action type="Rewrite" url="/es/{R:1}" />
        </rule>

        <!-- 4. 所有其他请求默认重写到/en子目录 -->
        <rule name="Auto Rewrite to English" stopProcessing="true">
          <match url="^(.*)$" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_URI}" pattern="^/$" negate="true" />
          </conditions>
          <action type="Rewrite" url="/en/{R:1}" />
        </rule>

        <!-- 5. 根路径的语言匹配 -->
        <rule name="Root Redirect to Spanish">
          <match url="^$" />
          <conditions>
            <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" ignoreCase="true" />
          </conditions>
          <action type="Rewrite" url="/es/" />
        </rule>

        <!-- 6. 根路径默认跳转到英文 -->
        <rule name="Root Redirect to English">
          <match url="^$" />
          <action type="Rewrite" url="/en/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

规则顺序说明 #

规则按从上到下的优先级执行，必须严格遵守顺序：

1. 优先处理静态资源：避免JS、CSS等静态文件被路由规则误拦截。
2. 语言前缀请求处理：针对已明确带en/或es/的请求，直接交给对应语言的Angular应用处理路由逻辑。
3. 自动语言匹配：先检查用户请求头的Accept-Language是否偏好西班牙语，是则重写到/es/路径；否则默认重写到/en/路径，全程保持浏览器URL不变。
4. 根路径单独处理：针对首页请求，同样根据语言偏好转发到对应语言的首页。

web.config位置说明 #

仅需在网站根目录放置这一个web.config即可，/en/和/es/子目录不需要额外配置。根目录的规则会覆盖所有请求的处理逻辑，子目录若存在其他web.config反而会干扰规则执行，建议删除。

验证方法 #

1. 使用浏览器开发者工具修改请求头Accept-Language：
   • 设置为es-ES,es;q=0.9，访问www.myapp.com/workspace，确认服务器内部重写到/es/workspace（URL地址栏保持不变）。
   • 设置为en-US,en;q=0.9，访问同一地址，应重写到/en/workspace。
2. 测试静态资源：直接访问www.myapp.com/en/assets/main.js，确认能正常加载。
3. 测试语言目录路由：访问www.myapp.com/es/workspace，确认西班牙语页面正常渲染。

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