如何在单个项目中同时配置Blazor Server与Blazor WebAssembly页面

一、基础项目搭建 #

• 创建一个ASP.NET Core Web应用，选Blazor Server模板作为基础项目（后续集成WASM更便捷）。
• 在解决方案中新增一个Blazor WebAssembly App项目（推荐选托管模式，便于共享后端资源）。

二、路由与页面隔离配置 #

1. Blazor Server主项目路由调整 #

• 在主项目的Program.cs中，保留Server端路由端点，同时添加WASM页面的路由映射：

  app.MapBlazorHub();
  // 将/page1/*路径映射到WASM的入口页面
  app.MapFallbackToFile("/page1/{**segment}", "page1/index.html");
  

• 在主项目的_Layout.cshtml中添加导航链接，区分两个页面：

  <nav>
    <a href="/page1">页面一（WASM）</a>
    <a href="/page2">页面二（Server）</a>
  </nav>
  

2. Blazor WASM项目配置 #

• 修改WASM项目wwwroot/index.html的基础路径，确保路由前缀统一：

  <base href="/page1/" />
  

• 保持WASM项目Program.cs的默认路由配置，确保组件挂载正常：

  builder.RootComponents.Add<App>("#app");
  builder.RootComponents.Add<HeadOutlet>("head::after");
  

三、共享资源处理 #

• 新建一个类库项目，存放共享组件、模型或服务，分别引用到Server和WASM项目中。
• 后端API由Server项目提供，WASM通过HTTP请求调用，Server项目直接注入服务使用。

四、发布与自动化部署 #

• 配置WASM项目的Post-build事件，自动将wwwroot内容复制到Server项目的wwwroot/page1目录：

  xcopy /E /Y "$(SolutionDir)BlazorWasmProject\wwwroot" "$(SolutionDir)BlazorServerProject\wwwroot\page1"
  

• 启动Server项目后，访问/page1进入WASM页面，/page2进入Server页面。

五、核心注意事项 #

• 两个页面状态完全隔离，WASM运行在客户端，Server运行在服务端，共享数据需通过后端API或本地存储（如LocalStorage）实现。
• 确保Server和WASM项目的.NET版本一致，避免兼容性问题。
• 统一身份验证可使用ASP.NET Core Identity，WASM通过JWT或Cookie认证，Server直接集成Identity。

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