能否在一个Blazor App项目中配置多个客户端应用？

完全可以实现用一个.NET 8 Blazor服务器项目托管多个独立客户端，同时共享同一后端API且避免环回请求的开销，具体方案如下：

1. 通过路由映射配置多客户端托管 #

在服务器项目的Program.cs中，针对不同客户端配置独立的路由前缀和组件映射，同时为每个客户端分配对应的静态文件资源路径：

var builder = WebApplication.CreateBuilder(args);

// 添加共享服务（比如数据库上下文、业务逻辑服务等）
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));
builder.Services.AddScoped<WeatherForecastService>();

// 注册所有客户端的组件所需服务
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(
        typeof(Client1.App).Assembly,
        typeof(Client2.App).Assembly);

var app = builder.Build();

// 配置静态文件：为每个客户端指定独立的静态资源路径
app.UseStaticFiles();
// 客户端1的静态文件
app.UseStaticFiles("/client1", new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "wwwroot", "client1"))
});
// 客户端2的静态文件
app.UseStaticFiles("/client2", new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "wwwroot", "client2"))
});

app.UseRouting();

// 映射客户端1的路由
app.MapRazorComponents<Client1.App>()
    .AddInteractiveWebAssemblyRenderMode()
    .MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/client1"), clientApp =>
    {
        clientApp.MapFallbackToPage("/client1/{*path:nonfile}", "/client1/_Host");
    });

// 映射客户端2的路由
app.MapRazorComponents<Client2.App>()
    .AddInteractiveWebAssemblyRenderMode()
    .MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/client2"), clientApp =>
    {
        clientApp.MapFallbackToPage("/client2/{*path:nonfile}", "/client2/_Host");
    });

// 配置共享API端点（直接在服务器项目中定义，避免环回请求）
app.MapGet("/api/weatherforecast", (WeatherForecastService service) =>
{
    return service.GetForecast();
});

app.Run();

同时，需要为每个客户端在服务器项目中创建对应的_Host.cshtml页面（比如Pages/client1/_Host.cshtml和Pages/client2/_Host.cshtml），并修改页面中的资源引用路径，确保指向对应客户端的静态资源：

<!-- client1/_Host.cshtml -->
@page "/client1"
@namespace Client1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Client 1</title>
    <base href="/client1/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="Client1.styles.css" />
</head>
<body>
    <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

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

2. 共享API并避免环回开销 #

为了避免单独托管API带来的服务器组件环回请求开销，推荐两种方案：

方案一：API逻辑直接集成在服务器项目中 #

将API的核心业务逻辑（比如控制器、最小API端点）直接定义在服务器项目里，Blazor服务器模式的组件可以直接注入业务服务调用方法，完全跳过HTTP请求环节：

// 服务器项目中的业务服务
public class WeatherForecastService
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    public IEnumerable<WeatherForecast> GetForecast()
    {
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        });
    }
}

// 服务器组件直接调用服务
@inject WeatherForecastService ForecastService

<h3>Server Component - Weather Forecast</h3>
@foreach (var forecast in ForecastService.GetForecast())
{
    <p>@forecast.Date: @forecast.TemperatureC°C (@forecast.Summary)</p>
}

方案二：API核心逻辑封装为类库 #

如果API逻辑需要复用（比如同时供外部第三方调用），可以把业务逻辑、数据访问等核心代码封装成类库，服务器项目和独立API项目（若需）都引用该类库：

• Blazor服务器组件直接注入类库中的服务调用方法，避免HTTP请求
• WebAssembly客户端通过HTTP请求调用服务器上的API端点
• 独立API项目（若部署）同样调用类库中的逻辑，保证一致性

3. 关键注意事项 #

• 每个客户端的构建输出需要配置为输出到服务器项目对应的静态文件目录（可通过客户端项目的MSBuild配置实现自动复制）
• 确保共享服务（如数据库上下文、认证服务）在服务器项目中全局注册，或根据路由前缀做差异化配置
• 注意路由冲突问题，确保每个客户端的路由前缀唯一且不重叠

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