如何更改blazor-wasm应用程序的基本URL

Question

为blazor-wasm托管的应用程序生成的模板的基本URL从"/"开始(即，用于本地开发的https://localhost:5001/或部署时的https://www.domain-name.xyz/(。我需要将此基本URL改为"/app"，即(https://localhost:5001/app(或(https://www.domain-name.xyz/app(。

文档(这里和这里(说我必须更改index.html:中<base />标签中的基本URL

<base href="/app/" />

并在本地开发时使用命令行参数--pathbase：

dotnet run --pathbase=/app

我这样做了，没有对模板做任何其他更改。然而，这对我不起作用。我只是得到了一个404，没有找到应用程序的所有文件。

这里的这个问题表明，我还需要通过将"/app"传递给UseBlazorFrameworkFiles:来更改Blazor文件的公开位置

app.UseBlazorFrameworkFiles("/app")

这也不能解决我的问题。

有人能为如何实现这一点提供一个循序渐进的指导吗？这是有保证的。

Answer 1

您就快到了。我不确定你对根站点做了什么，所以我添加了一个简单的登录页，其中包含WASMSPA的链接。这是一整套说明书。

1. host.html-将base更改为<base href="/app/" />。这将确保SPA中的所有@Page指令都以应用为前缀。您需要后面的/
2. host.html-将脚本引用更改为<script src="/app/_framework/blazor.webassembly.js"></script>。如果你主持一个WASM SPA，你可以不改变它。实验
3. WASM项目文件添加StaticWebAssetBasePath。这将使用正确的路径设置构建

<PropertyGroup>
<StaticWebAssetBasePath>app</StaticWebAssetBasePath>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>

3. 在服务器项目中更新Startup，为mywebsite/app添加新的中间件路径

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebAssemblyDebugging();
}
else
{
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.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/app"), first =>
{
first.UseBlazorFrameworkFiles("/app");
first.UseStaticFiles();
first.UseRouting();
first.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapFallbackToFile("app/{*path:nonfile}", "app/index.html");
});
});
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
// endpoints.MapFallbackToFile("_index.cshtml");
endpoints.MapFallbackToPage("/_Index");
});
}

我在根网站上添加了一个默认登录页-_Index.cshtml

@page "/"
@model WebApplication2.Server.Pages._IndexModel
<h3>Hello App</h3>
<div><a href="/app">App WASM SPA</a></div>
@{
}

注意：在更新控制器url 之前，FetchData将无法工作

forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("/WeatherForecast");

您还可以将WASMwwwroot移动到根目录中，并在App.cshtml中添加启动页面来启动SPA。

有关更多信息，Javier Nelson在这里有一个Github网站，我写了一篇关于如何使用Github Repo在同一网站上托管多个SPAs的文章。