在单个解决方案中创建多个 WebAssembly 项目

Question

请查看 context 的这个问题以及 MrC aka Shaun Curtis 的回答

这个问题是关于我过去曾尝试解决但没有成功的问题。你熟悉这个 sample I've once downloaded and run it. It did not work. I then realized that I must add the base url to the url in the browser's address bar in order to run the first project, for instance: https://localhost: 44302/FirstApp That is, the Client project. And for the SecondClient it should be https://localhost: 44302/SecondApp. This is exactly how the sample app by MrC aka Shaun Curtis 作品吗，尽管他添加了一个 Razor Pages 应用程序来提供一个用于重定向到四个项目的菜单。

我尝试做的但没有太大成功的是将托管的第一个 WebAssemby 前端项目设置为默认项目；那是当我运行应用程序，或在地址栏中键入 https://localhost: 44302. 如果我键入 https://localhost: 44302/FirstApp，我会看到我添加到解决方案中的第一个独立的 WebAssembly 项目。第二个项目，第三个项目，等等，都是 WebAssembly 项目。我做不到：当我运行默认项目时，一切都很好...我可以在项目范围内导航，路由到计数器页面、获取数据页面等。

但是当我将段 /FirstApp 添加到地址栏中的 url 并按回车键时，路由器显示消息“抱歉，此地址没有任何内容。”而不是导航到基础 url /FirstApp/

代表的项目

这里有人知道如何实现我正在寻找的请求功能吗？

Answer 1

这是演示如何执行此操作的 Repo 摘要。

sub-folder Web Assembly 项目有这样的项目文件。导入位正在设置 <StaticWebAssetBasePath>

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

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
        <Nullable>enable</Nullable>
        <ImplicitUsings>enable</ImplicitUsings>
        <StaticWebAssetBasePath>grey</StaticWebAssetBasePath>
    </PropertyGroup>
....

和Index.html这样。我们更新了 base、css 和框架 js 文件的路径。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazr.Medusa.Grey</title>
    <base href="/grey/" />
    <link href="/grey/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="/grey/css/app.css" rel="stylesheet" />
    <link href="Blazr.Medusa.Grey.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="/grey/_framework/blazor.webassembly.js"></script>
</body>

</html>

Web项目依赖于所有的WebAssembly项目，所以它们都可以映射到wwwwroot。

Web 项目 Program 看起来像这样，每个 Web Assembly SPA 都有特定的端点。默认映射到基础 Web Assembly 项目 - Blazr.Medusa.WASM.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/grey"), app1 =>
{
    app1.UseBlazorFrameworkFiles("/grey");
    app1.UseRouting();
    app1.UseEndpoints(endpoints =>
    {
        endpoints.MapFallbackToFile("/grey/{*path:nonfile}", "/grey/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/green"), app1 =>
{
    app1.UseBlazorFrameworkFiles("/green");
    app1.UseRouting();
    app1.UseEndpoints(endpoints =>
    {
        endpoints.MapFallbackToFile("/green/{*path:nonfile}", "/green/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/purple"), app1 =>
{
    app1.UseBlazorFrameworkFiles("/purple");
    app1.UseRouting();
    app1.UseEndpoints(endpoints =>
    {
        endpoints.MapFallbackToFile("/purple/{*path:nonfile}", "/purple/index.html");
    });
});

app.UseBlazorFrameworkFiles("");

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();


app.MapFallbackToFile("/index.html");

app.Run();

每个站点 MainLayout 中的站点链接组件提供 SPA

之间的导航

<div class="p-2 m-2 text-end">
    <button class="btn btn-sm btn-primary me-1" @onclick='() => Go("")'>Go Base</button>
    <button class="btn btn-sm btn-secondary me-1" @onclick='() => Go("grey")'>Go Grey</button>
    <button class="btn btn-sm btn-success me-1" @onclick='() => Go("green")'>Go Green</button>
    <button class="btn btn-sm btn-dark me-1" @onclick='() => Go("purple")'>Go Purple</button>
</div>

@code {

    [Inject] private NavigationManager? NavManager { get; set; }
    
    private void Go(string colour)
        => this.NavManager?.NavigateTo($"/{colour}", true);
}

包含完整解决方案的 Repo 是 here

网站看起来像这样：

在单个解决方案中创建多个 WebAssembly 项目

Create a multiple WebAssembly projects in a single solution

blazor

blazor-webassembly

hosted-blazor-webassembly