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

Question

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

我的服务器的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/" />正如你所看到的，所有的配置都和微软文档

中的配置一样。但它不工作。请帮帮我。谢谢你！

Answer 1

您还需要更改您的csproj添加以下设置:

<PropertyGroup>
...
<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
</PropertyGroup>
<ItemGroup>
<ProjectReference Include="..Client{SOLUTION NAME}.Client.csproj" />
<ProjectReference Include="..SecondClientSecondBlazorApp.Client.csproj" />
<ProjectReference Include="..Shared{SOLUTION NAME}.Shared.csproj" />
</ItemGroup>

阅读这里获取更多信息:https://learn.microsoft.com/en us/aspnet/core/blazor/host -和- deploy/webassembly?view=aspnetcore - 5.0 # hosted-deployment-with-multiple-blazor-webassembly-apps-1

这是一个工作的多Wasm应用程序的示例。下面的代码来自我的服务器project inStartup:

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

我的客户。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://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-5.0