如何将.NET Aspire创建的Blazor SSR应用转为Blazor WebAssembly且保留连接？

步骤1：移除原Blazor Server项目 #

• 在解决方案资源管理器中右键默认生成的Blazor Server项目，选择删除，同时删除磁盘上对应的项目文件夹。

步骤2：添加Blazor WebAssembly项目 #

• 打开终端，切换到解决方案根目录，执行以下命令创建WASM项目：

  dotnet new blazorwasm -n BlazorWasmApp --framework net8.0
  

• 将新项目添加到解决方案：

  dotnet sln add BlazorWasmApp/BlazorWasmApp.csproj
  

步骤3：配置Aspire连接支持 #

• 编辑Blazor WASM项目的.csproj文件，添加Aspire相关包引用：

  <ItemGroup>
    <PackageReference Include="Aspire.Hosting" Version="8.0.0" />
    <PackageReference Include="Microsoft.Extensions.Configuration.AzureAppConfiguration" Version="8.0.0" />
    <!-- 按需添加其他Aspire服务包，比如Aspire.Npgsql、Aspire.Redis等 -->
  </ItemGroup>
  

• 修改Program.cs，集成Aspire配置与服务：

  var builder = WebAssemblyHostBuilder.CreateDefault(args);
  builder.RootComponents.Add<App>("#app");
  builder.RootComponents.Add<HeadOutlet>("head::after");
  
  // 加载Aspire配置中心
  builder.Configuration.AddAzureAppConfiguration();
  
  // 注册Aspire关联的服务（示例：后端API客户端）
  builder.Services.AddHttpClient("BackendApi", client => 
      client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));
  
  await builder.Build().RunAsync();
  

步骤4：迁移原项目内容 #

• 复制原Blazor Server项目中的Pages、Shared文件夹到Blazor WASM项目的对应位置，覆盖同名文件（注意备份）。
• 迁移wwwroot下的静态资源（CSS、JS、图片等），合并重复资源文件。
• 检查组件代码，移除Blazor Server特有的API（如HttpContextAccessor、服务器端IJSRuntime用法），替换为WASM兼容的实现。

步骤5：更新Aspire AppHost配置 #

• 打开AppHost/Program.cs，替换原Blazor Server项目的引用为新的WASM项目：

  var builder = DistributedApplication.CreateBuilder(args);
  
  // 替换为新的WASM项目
  var blazorWasm = builder.AddProject<Projects.BlazorWasmApp>("blazor-wasm");
  
  // 保留原有的Aspire服务配置（如数据库、缓存、后端API等）
  var sqlDb = builder.AddSqlServer("sqldb").AddDatabase("AppDb");
  blazorWasm.WithReference(sqlDb);
  
  builder.Build().Run();
  

• 右键AppHost项目→添加→项目引用，勾选新创建的BlazorWasmApp项目，确保引用生效。

步骤6：验证运行 #

• 启动AppHost项目，打开Aspire仪表板，确认Blazor WASM应用已注册并能连接到配置的服务。
• 访问WASM应用的URL，测试页面渲染、功能逻辑及Aspire服务连接是否正常。

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