如何将Blazor Server与WebAssembly整合为单应用，分路径实现SSR与后台管理？

这个方案完全可行，Blazor的架构设计支持同域名下混合部署SSR（Server-side Rendering）和WebAssembly（WASM）应用，刚好匹配你的SEO需求与后台管理功能的交互性要求。

一、根路径SSR产品展示站点实现 #

• 创建Blazor Web App项目，选择「Server」交互模式（默认已启用SSR，满足SEO需求）。
• 配置产品展示相关页面的根路由：
  • 首页：@page "/"
  • 产品详情页：@page "/product/{ProductId}"
• 确保项目输出为ASP.NET Core应用，直接托管即可提供SSR渲染的内容。

二、/app路径WASM后台管理应用部署 #

1. 独立创建WASM项目
   新建一个Blazor WebAssembly项目，专注实现产品增删改的后台管理功能。

2. 配置WASM路由前缀
   修改WASM项目的路由，让所有后台页面都以/app为前缀：

   • 在Program.cs中设置根组件的路由前缀：

     builder.RootComponents.Add<App>("#app", new Dictionary<string, object> { { "routePrefix", "/app" } });
     

   • 或者在App.razor的Router组件中指定前缀：

     <Router AppAssembly="@typeof(App).Assembly" RoutePrefix="/app">
         <Found Context="routeData">
             <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
         </Found>
         <NotFound>
             <LayoutView Layout="@typeof(MainLayout)">
                 <p>抱歉，该页面不存在</p>
             </LayoutView>
         </NotFound>
     </Router>
     

3. 整合WASM产物到SSR项目
   将WASM项目构建后的静态资源（默认路径：bin/Release/net8.0/wwwroot）复制到SSR项目的wwwroot/app目录下。
   可以通过MSBuild任务自动完成，在SSR项目的.csproj中添加：

   <Target Name="CopyWasmAssets" AfterTargets="Build">
       <Copy SourceFiles="..\BlazorAdminWasm\bin\$(Configuration)\net8.0\wwwroot\**" DestinationFolder="wwwroot\app\**" />
   </Target>
   

三、混合部署的关键配置 #

1. 静态文件访问配置
   在SSR项目的Program.cs中，先配置静态文件规则，确保/app路径的WASM资源能被正确加载：

   var builder = WebApplication.CreateBuilder(args);
   var env = builder.Environment;
   
   // 添加服务...
   
   var app = builder.Build();
   
   // 默认静态文件服务
   app.UseStaticFiles();
   
   // 配置/app路径的静态文件访问
   app.UseStaticFiles(new StaticFileOptions
   {
       RequestPath = "/app",
       FileProvider = new PhysicalFileProvider(
           Path.Combine(env.ContentRootPath, "wwwroot", "app"))
   });
   
   // Blazor Server的Hub路由
   app.MapBlazorHub();
   // SSR页面的 fallback
   app.MapFallbackToPage("/_Host");
   // WASM应用的 fallback，确保/app下的SPA路由正常工作
   app.MapFallbackToFile("/app/{*path}", "app/index.html");
   
   app.Run();
   

2. 服务器路由重写（以IIS为例）
   如果部署在IIS，需要在web.config中添加重写规则，避免WASM的SPA路由被SSR项目拦截：

   <configuration>
     <system.webServer>
       <rewrite>
         <rules>
           <rule name="Blazor WASM Admin" stopProcessing="true">
             <match url="^app/(.*)" />
             <conditions>
               <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
               <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
             </conditions>
             <action type="Rewrite" url="app/index.html" />
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
   </configuration>
   

四、部署验证 #

• 启动SSR项目后，访问根路径（如localhost:5000）应加载SSR渲染的产品页面；
• 访问localhost:5000/app应加载WASM后台管理应用，且内部路由（如/app/products）能正常跳转。

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