将 Blazor Webassembly 项目包含到现有 ASP.NET Core 项目中

Question

创建新的 Blazor Webassembly 项目时，有 a checkbox ASP.NET Core hosted，如果选中，将同时创建三个项目，一个 blazor Webassembly 项目、一个 ASP.NET Core 项目和一个共享库项目。在 Visual Studio 中运行 ASP.NET Core 项目时，我们可以调试 blazor 项目以及 ASP.NET Core 项目（放置断点、步骤等）。发布 ASP.NET Core 项目时，blazor 项目也包含在 wwwroot 文件夹中。

我对创建新的 ASP.NET Core 项目不感兴趣。我想将这个 blazor wasm 项目包含在我现有的 ASP.NET Core 项目中，这样我就可以一起调试它们，像上面的复选框一样将它们一起发布。我该怎么做？

Answer 1

1. 将Microsoft.AspNetCore.Components.WebAssembly.Server nuget 添加到 ASP.NET Core 应用程序。

2. 从 ASP.NET Core 应用程序引用 Blazor WebAssembly 应用程序。

   <Project Sdk="Microsoft.NET.Sdk.Web">
   <!-- ... -->
   <ItemGroup>
       <!-- ... -->
       <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.1" />
   </ItemGroup>
   
   <ItemGroup>
       <!-- ... -->
       <ProjectReference Include="..\MyBlazorApp.csproj" />
   </ItemGroup>
   <!-- ... -->
   </Project>
   

3. 编辑 ASP.NET Core 应用程序的Startup 文件：

   1. 如果在开发模式下运行，请添加 UseWebAssemblyDebugging（参见下面的示例）。
   2. 拨打UseBlazorFrameworkFiles。
   3. 添加MapFallbackToFile("index.html")路由。

   namespace MyApp
   {
       public class Startup
       {
           public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
           {
               if (env.IsDevelopment())
               {
                   // ...
                   app.UseWebAssemblyDebugging();                  // this
               }
   
               // ...
               app.UseBlazorFrameworkFiles();                      // this
   
               app.UseEndpoints(endpoints =>
               {
                   // ...
                   endpoints.MapFallbackToFile("index.html");      // this
               });
           }
       }
   }
   

4. 然后编辑launchSettings.json，像这样添加inspectUri：

   {
       // ...
       "profiles": {
       "IIS Express": {
           // ...
           "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
       },
       "MyApp": {
           // ...
           "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
       }
       }
   }