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

Posted 2023-02-15

【中文标题】如何更改 blazor wasm 应用程序的基本 URL

【英文标题】：How to change the base URL of a blazor wasm app

【发布时间】：2021-06-25 23:06:33

【问题描述】：

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

文档（here 和 here）说我必须更改 index.html 中 <base /> 标记中的基本 URL：

<base href="/app/" />

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

dotnet run --pathbase=/app

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

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

app.UseBlazorFrameworkFiles("/app")

这也不能解决我的问题。

任何人都可以提供一步一步的指导来说明如何实现这一点并且保证有效。

【参考方案1】：

你快到了。我不确定你在用根站点做什么，所以我添加了一个简单的登录页面，其中包含指向 WASM SPA 的链接。这是完整的说明。

host.html - 将 base 更改为 <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>
@

请注意，在您更新控制器 url 之前，FetchData 将不起作用

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

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

如需了解更多信息，请访问 Github 站点 here by Javier Nelson，以及我写的一篇文章，介绍如何在同一网站 here 上使用 Github 存储库托管多个 SPA。

【讨论】：

感谢您的详细解答。当使用dotnet run 命令在本地运行时，它就像一个魅力。但是当 dockerized 时，我看到了两次请求：一个具有正确路径 (localhost/app/ressourse) 会导致 200OK 响应，另一个具有路径 localhost/app/app/ressource 会导致 404 响应。你有机会知道我为什么会这样吗？

直接回答是否定的，我不使用 Docker。到社区 - 我怀疑它在代理中。我所有的东西都用于 Azure 应用服务。

我终于明白为什么我的请求（错误请求）比我应该的多。这是因为我的应用是 PWA。发布 pwa 应用程序时，dotnet 会生成一个名为 service-worker-assets.js 的文件，其中包含使应用程序脱机工作所需的所有文件的列表。显然，更改应用程序的基本路径会破坏这种机制。我通过从 service-worker-assets.js (sed -i 's/app\\\///g' wwwroot/app/service-worker-assets.js) 中所有文件的路径中删除“app/”部分（这是我的基本路径）来解决这个问题。稍后我可能会就此提出一个问题。再次感谢。

就我而言，我还必须添加app.UseStaticFiles("/app");。这解决了 Blazorise 以及将其他静态文件添加到 wasm 路径的潜在第三方库的问题。