.NET 8中如何混合独立运行的Blazor Server与Wasm并保留原有功能？

完全可以实现你想要的效果——在.NET 8中保留Blazor WebAssembly的完整PWA能力，同时让Wasm和Server模式独立运行，还能复用新版Blazor WebApp的认证视图逻辑。以下是具体实现步骤：

一、搭建基础项目结构 #

1. 直接创建ASP.NET Core Hosted的Blazor WebAssembly项目：在创建项目时选择「Blazor WebAssembly」模式，勾选「ASP.NET Core Hosted」选项，这会自动生成Server（宿主）、Client（Wasm客户端）、Shared（共享类库）三个项目，和.NET 6的托管Wasm结构一致。
2. 如果是已有升级项目，手动调整结构：确保Server项目作为Web宿主，Client项目为Blazor Wasm类型，Shared存放跨项目复用的模型、组件。

二、配置双模式独立运行 #

在Server项目的Program.cs中，同时注册Blazor Server和Wasm的服务与端点，通过路径前缀区分独立访问入口：

// 注册Blazor Server服务
builder.Services.AddServerSideBlazor();
// 注册Wasm托管服务（宿主模式默认已包含，确保保留）
builder.Services.AddBlazorWebAssemblyHosting();

// 配置中间件
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

// 配置Blazor Server端点（根路径访问）
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

// 配置独立Blazor Wasm端点（通过/wasm路径访问）
app.MapWhen(context => context.Request.Path.StartsWithSegments("/wasm"), app =>
{
    app.UseBlazorFrameworkFiles("/wasm");
    app.UseStaticFiles();
    app.MapFallbackToFile("/wasm/index.html");
});

配置完成后：

• 访问根路径/将进入Blazor Server模式
• 访问/wasm将进入独立运行的Blazor Wasm模式，完全保留PWA能力

三、复用新版认证视图切换逻辑 #

1. 在Shared项目中复刻新版Blazor WebApp的认证组件逻辑：
   • 创建Authentication.razor组件，实现登录、注册、用户信息展示的视图切换逻辑（参考新版模板的Authentication组件代码）
   • 封装认证状态判断、跳转逻辑，确保跨Server/Wasm模式通用
2. 统一配置认证服务：
   • 在Server项目中配置Identity或JWT认证（比如builder.Services.AddIdentity<IdentityUser, IdentityRole>()），搭建认证后端
   • 在Client项目中配置Wasm认证（比如builder.Services.AddOidcAuthentication(options => { ... })），保持与Server端认证体系一致
3. 在Server和Client项目的布局组件中引用Shared的认证组件，实现双模式下统一的认证视图体验

四、保留Wasm完整PWA功能 #

1. 确保Client项目wwwroot目录下存在manifest.json、service-worker.js、service-worker-assets.js文件（可从.NET 6 Wasm模板复制，或在.NET 8中重新生成）
2. 在Client项目的.csproj中添加PWA配置：

<PropertyGroup>
  <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
  <PwaServiceWorkerEnabled>true</PwaServiceWorkerEnabled>
  <BlazorWebAssemblyEnableAutoGeneratedComponent>true</BlazorWebAssemblyEnableAutoGeneratedComponent>
</PropertyGroup>

3. 在Client的index.html中引入PWA相关资源：

<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#ffffff" />
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js');
  }
</script>

注意事项 #

• 路由隔离：通过路径前缀（如/wasm）区分双模式路由，避免冲突
• 状态同步：跨模式共享状态可通过LocalStorage（Wasm）、Session（Server）或后端API同步
• 调试：分别启动Server和Client项目调试，确保双模式功能正常

内容的提问来源于stack exchange，提问作者Jose Manuel Lepe