.NET Core React Redux模板部署后JS/CSS文件404问题求助

嘿，我之前也碰到过几乎一模一样的问题，折腾了好一会儿才搞定，给你几个亲测有效的解决思路：

1. 先把Startup.cs的中间件配置改对 #

问题核心是服务器没把/static开头的请求映射到ClientApp/build/static目录，而且SPA中间件的 fallback 机制把没匹配到的请求都返回了Index.html，才会出现改路径后拿到HTML的情况。

打开你的Startup.cs，找到Configure方法，调整静态文件和SPA中间件的配置：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 保留你原来的异常处理、路由等中间件配置...

    // 第一步：配置/static路径指向ClientApp/build/static
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, "ClientApp/build/static")),
        RequestPath = "/static"
    });

    // 第二步：配置根路径指向ClientApp/build，处理favicon.ico这类根目录的静态文件
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, "ClientApp/build")),
        RequestPath = ""
    });

    // 第三步：配置SPA中间件，指定生产环境的静态文件根目录
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
        else
        {
            // 生产环境下，让SPA中间件知道静态文件在ClientApp/build
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
                    Path.Combine(env.ContentRootPath, "ClientApp/build"))
            };
        }
    });
}

这样配置后，服务器会先处理/static开头的静态资源请求，找不到的才会触发SPA的 fallback，就不会返回HTML代替JS/CSS了。

2. 让React构建时自动生成正确的资源路径 #

你不用手动修改Index.html里的路径，只要在React构建时指定publicPath为/static/，生成的Index.html就会自动用正确的绝对路径。

如果是Create React App生成的项目，直接修改ClientApp/package.json里的build命令：

"scripts": {
    "build": "PUBLIC_URL=/static react-scripts build"
}

下次构建时，Index.html里的资源路径就会变成/static/css/main.xxx.css这种，和服务器配置完全匹配。

3. 确保发布时静态文件被完整复制 #

有时候VS发布时会漏掉ClientApp/build里的文件，你可以编辑项目的.csproj文件，添加以下配置：

<ItemGroup>
    <Content Include="ClientApp/build/**/*">
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </Content>
</ItemGroup>

这样发布时会自动把React构建后的所有静态文件复制到发布文件夹里，不会出现文件缺失的情况。

最后验证一下 #

重新发布项目，打开站点，用Chrome开发者工具看网络请求：

• 确认JS/CSS的请求路径是/static/...
• 检查响应状态是200，且内容是对应的JS/CSS文件，不是Index.html

按照这个流程走下来，应该就能彻底解决你的问题了！

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