ASP.NET Core Blazor项目如何将前后端文件分离到独立文件夹

默认创建的Blazor项目会把前后端代码混在根目录，按以下步骤调整就能实现前后端代码完全隔离，目录结构清晰。

1. 规划目录结构 #

先在项目根目录新建两个一级文件夹：

• Backend：存放所有后端逻辑，包括控制器、数据模型、服务类、数据库上下文、中间件、鉴权相关代码
• Frontend：存放所有前端相关内容，包括Blazor页面/组件、静态资源（js/css/图片/字体）、前端状态管理、前端工具类
  你当前的初始项目结构如下：
  

2. 迁移文件 #

把对应类型的文件剪切到目标目录：

• 原根目录下的Data、Controllers、Services、Models、Middleware等后端专属文件夹，全部移到Backend目录
• 原根目录下的Pages、Shared、wwwroot，以及_Imports.razor、App.razor、_Host.cshtml（Blazor Server）这类前端根文件，全部移到Frontend目录

3. 修改项目配置让程序识别新路径 #

3.1 调整.csproj项目配置 #

打开项目的.csproj文件，在原有配置基础上添加以下节点，告诉编译器Razor组件和静态资源的新位置：

<ItemGroup>
  <!-- 注册新位置的Razor组件 -->
  <RazorComponent Include="Frontend\**\*.razor" />
  <!-- 注册新位置的wwwroot静态资源 -->
  <Content Include="Frontend\wwwroot\**" CopyToOutputDirectory="PreserveNewest" />
</ItemGroup>

3.2 调整Program.cs启动配置 #

修改启动文件里的静态资源、Razor页面路径配置：

// 静态资源中间件指定新的wwwroot路径
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "Frontend", "wwwroot"))
});

// 指定Razor页面的根目录
builder.Services.AddRazorPages()
    .WithRazorPagesRoot("/Frontend/Pages");

// Blazor相关映射保持原有逻辑即可，不需要额外修改
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

如果是.NET 8+的Blazor Web App，在调用AddRazorComponents时指定组件的搜索程序集即可，逻辑和上面一致。

4. 修复命名空间引用 #

文件迁移后，命名空间会跟着目录层级变化，比如原YourApp.Data命名空间会变成YourApp.Backend.Data，全局替换旧的命名空间引用即可，IDE也会自动提示缺失的引用，一键修复就行。

小提示：如果你用的是Blazor WebAssembly托管模式，本身模板就已经把Server（后端）、Client（前端）拆成了两个独立项目，只要把公共DTO单独放到Shared项目里，天然就是分离结构，不需要额外调整单项目目录。

验证 #

改完后启动项目，能正常加载页面、接口请求正常就说明配置生效。后续开发时，所有后端逻辑写到Backend目录，所有前端相关代码写到Frontend目录即可，不会再出现文件混放的问题。

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