React项目web.config在IIS服务器失效：子路由访问404问题排查

你的问题出在两个关键配置缺失：web.config的重写规则未适配子路径，同时React项目本身未配置正确的基础路径。

1. 修改web.config的重写规则 #

当前规则会匹配所有URL，但部署在/app/子路径下，需要限定重写范围并修正目标路径：

<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <rule name="React Routes" stopProcessing="true">
                <!-- 仅匹配/app/下的所有子路径 -->
                <match url="^app/(.*)$" />
                <conditions logicalGrouping="MatchAll">
                    <!-- 排除实际存在的文件和目录 -->
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <!-- 重写到子路径下的index.html -->
                <action type="Rewrite" url="/app/index.html" />
            </rule>
        </rules>
    </rewrite>
    <!-- 保留原staticContent配置 -->
    <staticContent>
        <remove fileExtension=".json" />
        <remove fileExtension=".woff2" />
        <remove fileExtension=".png" />
        <remove fileExtension=".svg" />
        <remove fileExtension=".ico" />
        <remove fileExtension=".webmanifest" />
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
        <mimeMap fileExtension=".png" mimeType="image/png" />
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension=".ico" mimeType="image/vnd.microsoft.icon" />
        <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
    </staticContent>
</system.webServer>
</configuration>

2. 配置React项目的基础路径 #

根据你使用的构建工具，添加对应配置：

• Create React App：在package.json中添加"homepage": "/app/"
• Vite：在vite.config.js/ts中设置base: '/app/'
• React Router：在路由根组件（如BrowserRouter）中添加basename="/app"属性

修改完成后，服务器会将所有/app/下的非文件/目录请求转发到/app/index.html，同时React项目会正确生成子路径下的资源链接和路由。

内容的提问来源于stack exchange，提问作者Máté Wiszt