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

Question

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

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

Answer 1

1. 将Microsoft.AspNetCore.Components.WebAssembly.Servernuget添加到 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. 编辑StartupASP.NET Core 应用程序的文件：

   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}"
       }
       }
   }