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

Hac*_*kim 7 blazor blazor-client-side asp.net-blazor blazor-webassembly

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

文档(此处此处)说我必须更改<base />index.html中标记中的基本 URL :

<base href="/app/" />

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

dotnet run --pathbase=/app

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

此处的此问题表示我还需要通过将“/app”传递给 UseBlazorFrameworkFiles 来更改 Blazor 文件的公开位置:

app.UseBlazorFrameworkFiles("/app")

这也不能解决我的问题。

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

MrC*_*tis 15

你快到了。我不确定您正在对根站点执行什么操作,因此我添加了一个简单的登录页面,其中包含指向 WASM SPA 的链接。这是完整的说明集。

  1. host.html - 将基数更改为<base href="/app/" />. 这将确保@PageSPA 中的所有指令都以app为前缀。你需要尾随/.
  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>
Run Code Online (Sandbox Code Playgroud)
  1. 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");
    });
}
Run Code Online (Sandbox Code Playgroud)

我已将默认登录页面添加到根站点 - _Index.cshtml

@page "/"
@model WebApplication2.Server.Pages._IndexModel
    <h3>Hello App</h3>
<div><a href="/app">App WASM SPA</a></div>
@{
}
Run Code Online (Sandbox Code Playgroud)

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

forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("/WeatherForecast");
Run Code Online (Sandbox Code Playgroud)

您还可以将 WASM wwwroot移至根目录并添加启动页面(如 _App.cshtml)以启动 SPA。

有关更多信息,请访问 Javier Nelson 的Github 网站,以及我写的一篇关于如何使用Github Repo在同一网站上托管多个 SPA 的文章。

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