如何在单个 Blazor 项目中托管多个客户端 WASM 应用程序？

Question

我正在构建托管多个 Blazor WebAssembly 应用程序的 ASP.NET Core 应用程序。

我的服务器的Startup.cs：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Notes.Web.Server
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebAssemblyDebugging();
            }

            app.UseHttpsRedirection();
            app.MapWhen(ctx => ctx.Request.Path.Equals("/client"), client =>
            {
                client.Use((ctx, nxt) =>
                {
                    ctx.Request.Path = "/client" + ctx.Request.Path;
                    return nxt();
                });
                
                client.UseBlazorFrameworkFiles("/client");
                client.UseStaticFiles();
                client.UseRouting();
                client.UseEndpoints(endpoints =>
                {
                    endpoints.MapControllers();
                    endpoints.MapFallbackToFile("/client/{*path:nonfile}", "client/index.html");
                });
            });
        }
    }
}

当我尝试访问/client 地址时，页面加载成功，但由于找不到脚本_framework/blazor.webassembly.js，应用程序无法加载。

在客户的index.html 我有<base href="/client/" /> 如您所见，所有配置都与Microsoft documentation中的相同

但它不起作用。请帮我。谢谢！

Answer 1

您还需要更改您的 csproj 添加此设置：

<PropertyGroup>
  ...
  <StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
</PropertyGroup>

<ItemGroup>
  <ProjectReference Include="..\Client\{SOLUTION NAME}.Client.csproj" />
  <ProjectReference Include="..\SecondClient\SecondBlazorApp.Client.csproj" />
  <ProjectReference Include="..\Shared\{SOLUTION NAME}.Shared.csproj" />
</ItemGroup>

阅读此处了解更多信息： https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#hosted-deployment-with-multiple-blazor-webassembly-apps-1

示例

这是一个工作多个 Wasm 应用程序的示例。
以下代码来自我在Startup中的Server项目：

app.MapWhen(ctx => ctx.Request.Host.Port == 5001 ||
            ctx.Request.Host.Equals("clientapp.com"), first =>
            {
                first.Use((ctx, nxt) =>
                {
                    ctx.Request.Path = "/Client" + ctx.Request.Path;
                    return nxt();
                });

                first.UseBlazorFrameworkFiles("/Client");
                first.UseStaticFiles();
                first.UseStaticFiles("/Client");
                first.UseRouting();

                first.UseAuthentication();
                first.UseAuthorization();

                first.UseEndpoints(endpoints =>
                {
                    endpoints.MapControllers();
                    endpoints.MapFallbackToFile("/Client/{*path:nonfile}",
                        "Client/index.html");
                });
            });

我的 Client.csproj 包含：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <StaticWebAssetBasePath>Client</StaticWebAssetBasePath>
    <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
  </PropertyGroup>
...

源代码

GitHub上的工作项目示例https://github.com/nbiada/multiclient-wasm-example

Answer 2

您是否将_framework/blazor.webassembly.js 添加到您的host.cshtml 中？

请查看这篇文章https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-5.0