在Azure App Service部署Angular i18n多语言应用返回404如何解决？

1. 修复web.config基础语法错误 #

你当前提供的web.config最后一行</configuration缺失闭合符号>，会直接导致IIS配置解析失败，首先修正为</configuration>。

2. 修正URL重写规则逻辑错误 #

现有规则存在两个核心问题：

• fr/*/en/*的匹配规则仅能匹配fr/xxx、en/xxx类路径，单独访问/fr、/en、站点根路径时无法命中规则
• 重写目标仅填写/fr//en-US未指定入口文件，IIS无法找到对应资源返回404

替换为如下完整配置：

<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <!-- 处理fr语言路径 -->
            <rule name="Angular Routes fr" stopProcessing="true">
                <match url="^fr(/.*)?$" />
                <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" />
            </rule>
            <!-- 处理en路径映射到en-US -->
            <rule name="Angular Routes en" 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-US/index.html" />
            </rule>
            <!-- 处理直接访问en-US路径 -->
            <rule name="Angular Routes en-US" stopProcessing="true">
                <match url="^en-US(/.*)?$" />
                <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-US/index.html" />
            </rule>
            <!-- 根路径默认跳转到fr语言 -->
            <rule name="Angular Routes default" 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="/fr/index.html" />
            </rule>
        </rules>
    </rewrite>
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
</system.webServer>
</configuration>

3. 验证Angular打包配置 #

• 确认使用官方i18n打包命令生成多语言包：ng build --configuration production --localize，该命令会自动为每个语言目录下的index.html设置正确的base href，fr目录应为<base href="/fr/">，en-US目录应为<base href="/en-US/">
• 确认wwwroot下确实存在fr和en-US两个文件夹，每个文件夹内都有独立的index.html和对应静态资源

4. 验证Azure App Service配置 #

• 确认使用的是Windows系统的Azure App Service（web.config仅适用于IIS，Linux宿主需要配置nginx规则）
• Azure Windows App Service默认已预装URL Rewrite模块，自定义IIS环境需要手动安装该模块

5. 快速测试验证 #

• 直接访问https://domain.azurewebsites.net/fr/index.html和https://domain.azurewebsites.net/en-US/index.html，如果可以正常打开说明打包文件无问题，故障仅出在重写规则
• 如果直接访问上述路径也返回404，检查wwwroot下的文件部署是否完整、是否存在权限限制

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