将Blazor Webassembly项目包含到现有的ASP.NET Core项目中 [英] Include a Blazor Webassembly project into an existing ASP.NET Core project

问题描述

在创建新的Blazor Webassembly项目时，有

When creating a new Blazor Webassembly project, there is a checkbox ASP.NET Core hosted where if selected will create three projects at once, a blazor webassembly project, an ASP.NET Core project, and a shared library project. When the ASP.NET Core project is run in Visual Studio, we can debug the blazor project as well as the ASP.NET Core project (put breakpoint, step, etc.). When the ASP.NET Core project is published, the blazor project is also included in the wwwroot folder.

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

I'm not interested in creating a new ASP.NET Core project. I want to include this blazor wasm project in my existing ASP.NET Core project so I can debug them together, publish them together like the checkbox above. How do I do that?

推荐答案

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

1. Add Microsoft.AspNetCore.Components.WebAssembly.Server nuget to the ASP.NET Core application.

从ASP.NET Core应用程序引用Blazor WebAssembly应用程序.

Reference the Blazor WebAssembly application from the ASP.NET Core application.

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

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

如果在开发模式下运行，请
1. 添加 UseWebAssemblyDebugging (请参见下面的示例).
2. 调用 UseBlazorFrameworkFiles .
3. 添加 MapFallbackToFile(" index.html")路由.

1. Add UseWebAssemblyDebugging if running in development mode (see sample below).
2. Call the UseBlazorFrameworkFiles.
3. Add MapFallbackToFile("index.html") routing.

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

这篇关于将Blazor Webassembly项目包含到现有的ASP.NET Core项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！