将 Blazor WASM 作为 Blazor 服务器端运行

Question

注意：这是一篇“分享您的知识 - 问答风格”的帖子。我可能投了反对票，因为有人误解了这篇文章的上下文:(

问题

Blazor WASM 可以很容易地比 Blazor 服务器端更受青睐，而且在开发方面没有缺点。目前，Blazor WASM 不支持功能齐全的调试体验，并且启动速度非常慢。与 Blazor 服务器端相比，这会大大减慢开发速度。虽然老实说，我个人认为调试体验比缓慢启动更能减慢开发速度。

建议的解决方案

注意：我在其中包含了“建议”一词，因为我不确定此解决方案可能导致的缺点，因此请随时对我的答案发表评论。

解决方案是简单地创建一个额外的 Blazor 服务器端项目，然后将 Blazor WASM 项目引用到 Blazor 服务器端项目。然后，对 Blazor 服务器端的Startup和 进行一些调整，_Host.cshtml以正确使用 Blazor WASM razor 文件和 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来解释稍后有关具有 API 控制器的信息。之后还要创建 Blazor 服务器端项目。

   

2. 到目前为止，您的项目结构应该类似于下面的第一个屏幕截图。

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

   

3. 将 Blazor WASM 项目引用到 Blazor 服务器端项目。

   • ASP.NET Core Hosted - 引用BlazorWasm.Client&BlazorWasm.Server项目。
   • 独立- 按原样引用单个 Blazor WASM 项目。

4. 转到StartupBlazor 服务器端项目的类。在 中ConfigureServices()，将WeatherForecastService与BlazorServer.Data命名空间一起删除，然后为HttpClientBlazor WASM 项目中的 razor 文件添加一个服务。

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

   注意在生产中，我不建议创建HttpClient. 使用IHttpClientFactory来代替。访问这篇文章使用 IHttpClientFactory 实现弹性 HTTP 请求。

   对于 ASP.NET Core WASM 项目

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

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

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

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

6. 最后，更改标签App的type属性中的 ，component并参考AppBlazor WASM 项目中的razor 类文件。在这个例子中，App在BlazorWasm.Client项目中找到了这个类：

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

就是这样！当你运行 Blazor 服务器端项目时，它应该在没有“正在加载...”文本的情况下加载。

• 没有对 Blazor WASM 项目进行任何更改，也没有进行重大的代码重复。
• 唯一需要更改的是引用和launchSettings.json& appsettings.json。
• 至于StartupBlazor 服务器端中的配置，您只需在 Blazor WASM 项目中创建扩展方法并在 Blazor 服务器端项目中使用它们即可。

注意：老实说，我认为这理想情况下（？）仅用于开发期间的调试，因为 WASM razor 文件不会完全利用真正的 Blazor 服务器端的功能，因为它仍然会使用 HTTP 请求。

希望楼下多多指教！:DD