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

Question

创建新的 Blazor Webassembly 项目时，有 a checkbox 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

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

从 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>

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

添加 UseWebAssemblyDebugging如果在开发模式下运行(参见下面的示例)。

调用 UseBlazorFrameworkFiles .

添加 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
            });
        }
    }
}

然后编辑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}"
    }
    }
}