能否将Blazor SPA作为ASP.NET Core MVC区域进行集成？

完全可以将完整的Blazor SPA（服务器端渲染/自动渲染）部署到ASP.NET Core MVC的独立Area中，且该Area内的路由可由Blazor路由系统全权处理，同时能复用或扩展原有MVC的授权规则。

1. 搭建MVC Area基础结构 #

先在现有MVC项目中创建名为Admin（对应业务后台）的Area，标准目录结构如下：

Areas/
└── Admin/
    ├── Controllers/
    │   └── HomeController.cs
    ├── Views/
    │   ├── Home/
    │   │   └── Index.cshtml
    │   └── Shared/
    └── AdminAreaRegistration.cs

AdminAreaRegistration.cs的路由注册代码：

public class AdminAreaRegistration : AreaRegistration
{
    public override string AreaName => "Admin";

    public override void RegisterArea(AreaRegistrationContext context)
    {
        context.MapRoute(
            "Admin_default",
            "Admin/{controller=Home}/{action=Index}/{id?}");
    }
}

2. 集成Blazor到目标Area #

方式一：Blazor Server模式 #

（1）更新Program.cs配置

保留原有MVC服务的同时，添加Blazor Server相关配置：

var builder = WebApplication.CreateBuilder(args);

// 保留原有MVC服务
builder.Services.AddControllersWithViews();
// 注册Blazor Server服务
builder.Services.AddServerSideBlazor();
// 配置授权规则（可复用原有MVC策略，或单独为Admin Area定制）
builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("AdminOnly", policy =>
        policy.RequireRole("Admin"));
});

var app = builder.Build();

// 保留原有中间件流程
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

// 映射全局及Area的MVC路由
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapAreaControllerRoute(
    name: "Admin",
    areaName: "Admin",
    pattern: "Admin/{controller=Home}/{action=Index}/{id?}");

// 配置Blazor Hub（Server模式必需）
app.MapBlazorHub();
// 让Admin Area下的所有非文件请求 fallback 到Blazor入口页
app.MapFallbackToAreaPage("/Admin/{*path:nonfile}", "/_Host", "Admin");

app.Run();

（2）创建Blazor入口页_Host.cshtml

在Areas/Admin/Views/Shared目录下创建该文件，作为Blazor的启动载体：

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>业务后台管理系统</title>
    <!-- 必须设置base href为Area路径，确保Blazor路由基准正确 -->
    <base href="/Admin/" />
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <!-- 渲染Blazor根组件，指定Server模式 -->
    <component type="typeof(App)" render-mode="Server" />

    <script src="/_framework/blazor.server.js"></script>
</body>
</html>

（3）添加Blazor核心组件文件

在Areas/Admin下新增Blazor专属目录：

Areas/Admin/
└── Components/
    ├── App.razor
    ├── _Imports.razor
    └── Pages/
        ├── Dashboard.razor
        ├── Users.razor
        └── _Layout.razor

App.razor配置Blazor路由：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(_Layout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(_Layout)">
            <p>抱歉，未找到指定页面！</p>
        </LayoutView>
    </NotFound>
</Router>

Pages/Dashboard.razor示例页面（默认首页）：

@page "/"
@attribute [Authorize(Policy = "AdminOnly")]

<h1>后台仪表盘</h1>
<p>欢迎进入业务后台管理系统</p>

Pages/Users.razor示例页面：

@page "/users"
@attribute [Authorize(Policy = "AdminOnly")]

<h1>用户管理</h1>
<p>这里可进行系统用户的增删改查操作</p>

方式二：Blazor Auto渲染模式 #

若需静态+交互式混合渲染，仅需调整两处配置：

• Program.cs中替换Blazor服务注册：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

• _Host.cshtml中修改组件渲染模式：

<component type="typeof(App)" render-mode="Auto" />

其余路由、目录结构配置与Server模式完全一致，Blazor仍可接管Area内的所有路由。

3. 授权规则的集成与复用 #

Blazor可直接复用MVC的授权策略，也可在两层配置实现双重保障：

• Blazor组件层：在页面或组件上添加[Authorize]或[Authorize(Policy = "AdminOnly")]特性，实现细粒度授权。
• MVC路由层：在Area路由注册时添加授权约束，拦截未授权的直接访问：

// 在AdminAreaRegistration的路由中添加授权
context.MapRoute(
    "Admin_default",
    "Admin/{controller=Home}/{action=Index}/{id?}")
    .RequireAuthorization("AdminOnly");

4. 路由逻辑说明 #

• 访问/Admin时，会触发MapFallbackToAreaPage规则，跳转到Blazor的_Host.cshtml，随后Blazor路由系统接管/Admin/dashboard、/Admin/users等子路径。
• 项目中其他MVC Area的路由不受影响，依然由MVC路由系统处理。

• 必须设置正确的base href，确保Blazor路由的基准路径与Area路径匹配。
• Blazor的AppAssembly要指向当前Area的组件程序集，避免路由无法找到页面。
• 若需共享MVC的布局样式，可在Blazor的_Layout.razor中复用MVC的静态资源或布局逻辑。

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