这是演示如何执行此操作的 Repo 的摘要。
子文件夹 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 项目依赖于所有 Web Assembly 项目,因此它们都可以映射到wwwwroot
.
Web 项目Program
看起来像这样,每个 Web 程序集 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);
}
包含完整解决方案的回购在这里
该网站如下所示: