如何更改 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).

文档 (here and here) 说我必须更改 index.html 中 <base /> 标签中的基础 URL:

<base href="/app/" />

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

dotnet run --pathbase=/app

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

这个问题 here 说我还需要通过将“/app”传递给 UseBlazorFrameworkFiles 来更改 Blazor 文件的公开位置：

app.UseBlazorFrameworkFiles("/app")

这也没有解决我的问题。

任何人都可以提供有关如何实现这一目标的分步指导。

Answer 1

你快到了。我不确定您对根站点做了什么，所以我在 WASM SPA 中添加了一个带有 link 的简单登录页面。这是一套完整的说明。

host.html - 将基数更改为 <base href="/app/" />。这将确保 SPA 中的所有 @Page 指令都以 app 为前缀。您需要尾随 /.
host.html - 将脚本引用更改为 <script src="/app/_framework/blazor.webassembly.js"></script>。如果您托管单个 WASM SPA，您将无需更改它。实验。
WASM 项目文件添加 StaticWebAssetBasePath。这会使用正确的路径设置构建。

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

更新Server项目中的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>
@{
}

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

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

您还可以将 WASM wwwroot 移动到根目录中，并在 _App.cshtml 处添加启动页面以启动 SPA。

有关详细信息，请访问 Github 站点 here by Javier Nelson and an article I wrote on how to host multiple SPAs on the same website here，其中包含 Github Repo。

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

How to change the base URL of a blazor wasm app

blazor

blazor-webassembly

blazor-client-side

asp.net-blazor