在Blazor服务器端运行Blazor WASM

Question

注意：这是“分享您的知识-问答风格”帖子。我可能很沮丧，因为有人误解了这篇文章的背景：（

问题

在没有Blazor Server-Side缺点的情况下，它很容易成为Blazor Server-Side的首选。目前，Blazor WASM不支持功能全面的调试体验，并且启动速度非常慢。与使用Blazor Server-Side相比，这减慢了开发速度。尽管老实说，我个人认为调试经验比缓慢启动更会使开发变慢。

建议的解决方案

注意：我在其中添加了“拟议”一词，因为我不确定该解决方案可能带来的不利影响，因此请在下面对我的回答发表评论。

解决方案是仅创建一个额外的Blazor Server-Side项目，然后将Blazor WASM项目引用到Blazor Server-Side项目。然后，对Blazor服务器端的Startup和_Host.cshtml进行一些调整，以正确使用Blazor WASM剃刀文件和wwwroot文件。有关此解决方案的分步说明，请参阅下面的建议答案。

简而言之，此解决方案只需添加并配置Blazor服务器端项目，而无需进行任何更改和任何重要的代码重复 Blazor WASM项目。

Answer 1

注意：：在此示例中，我使用的是 Visual Studio 2019 16.7.2 ，并且模板的当前版本为 3.1.8

1. 创建一个Blazor WASM项目。 ASP.NET Core Hosted或Standalone选项都可以正常工作，但稍后将讨论它们的不同配置。其余选项将无效。在此示例中，我将使用 ASP.NET Core Hosted （托管ASP.NET Core），稍后再说明有关使用API​​控制器的信息。然后再创建Blazor服务器端项目。

   

---

1. 目前，您的项目结构应与下面的第一个屏幕截图相似。

   删除Blazor服务器端项目中突出显示的项目，如下面的第二个屏幕截图所示。

   

---

1. 将Blazor WASM项目引用到Blazor Server-Side项目。

   • 托管的ASP.NET Core -引用BlazorWasm.Client和BlazorWasm.Server项目。
   • 独立-照原样引用单个Blazor WASM项目。

---

1. 转到Blazor服务器端项目的Startup类。在ConfigureServices()中，将WeatherForecastService与BlazorServer.Data命名空间一起删除，然后为Blazor WASM项目中的剃刀文件使用的HttpClient添加服务。

   services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });
   

   注意，在生产中，我不建议创建HttpClient的实例。请改用IHttpClientFactory。请访问本文Use IHttpClientFactory to implement resilient HTTP requests。

   对于ASP.NET Core WASM项目

   在Configure()中，映射控制器的端点。这将使用X.Server / BlazorWasm.Server项目中的控制器。

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllers();
       ...
   });
   

---

1. 转到Blazor服务器端项目的 / Pages 文件夹中的_Host.cshtml。由于Blazor WASM项目的主CSS文件的文件名不同，因此将css/site.css的引用更改为css/app.css。

   <link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
   <link href="css/app.css" rel="stylesheet" /> <!-- New -->
   

---

1. 最后，更改App标签的type属性中的component，并引用Blazor WASM项目中的App剃刀类文件。在此示例中，在App项目中找到BlazorWasm.Client类：

   <component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
   <component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->
   

---

就是这样！当您运行Blazor Server-Side项目时，应在加载时不带“正在加载...”文本。

• 没有对B​​lazor WASM项目进行任何更改，也没有进行重大的代码重复。
• 唯一需要更改的是引用和launchSettings.json和appsettings.json。
• 对于Startup中Blazor Server-Side的配置，您只需在Blazor WASM项目中创建扩展方法，然后在Blazor Server-Side项目中使用它们即可。

注意：：老实说，这是理想的（？）仅用于开发过程中的调试，因为WASM剃须刀文件无法完全利用真正的Blazor服务器端的功能，因为它仍会使用HTTP请求。

---

希望在下面获得反馈！ ：DD