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

Include a Blazor Webassembly project into an existing ASP.NET Core project

创建新的 Blazor Webassembly 项目时,a checkbox ASP.NET Core hosted 如果选中,将同时创建三个项目,一个 blazor webassembly 项目,一个 ASP.NET Core 项目和一个共享库项目。当ASP.NET Core项目在运行 in Visual Studio时,我们可以调试blazor项目以及ASP.NET Core项目(放断点,step等)。当 ASP.NET 核心项目发布时,blazor 项目也包含在 wwwroot 文件夹中。

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

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

  2. 从 ASP.NET 核心应用程序引用 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 核心应用程序的 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}"
        }
        }
    }