如何更改 blazor wasm 應用程序的基礎 URL

Question

The generated template for a blazor wasm hosted app has its base URL starting at '/' ( ie, https://localhost:5001/ for local development or https://www.domain-name.xyz/ when deployed.) I需要將此基礎 URL 改為“/app”，即（ https://localhost:5001/app ）或（ https://www.domain-name.xyz/app /app）或

文檔（ 此處和此處）說我必須更改 index.html 中<base />標記中的基本 URL：

<base href="/app/" />

並在本地開發時使用命令行參數--pathbase ：

dotnet run --pathbase=/app

我這樣做了，並且沒有對模板進行任何其他更改。 然而，這對我不起作用。 我只是得到一個 404 找不到應用程序的所有文件。

這里的這個問題說我還需要通過將“/app”傳遞給 UseBlazorFrameworkFiles 來更改 Blazor 文件的公開位置：

app.UseBlazorFrameworkFiles("/app")

這也不能解決我的問題。

任何人都可以提供如何實現這一點的分步指導，並且保證可以工作。

Answer 1

您快到了。 我不確定您在使用根站點做什么，因此我添加了一個簡單的登錄頁面，其中包含指向 WASM SPA 的鏈接。 這是一套完整的說明。

1. host.html - 將 base 更改為<base href="/app/" /> 。 這將確保 SPA 中的所有@Page指令都以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>

3. 更新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 在您更新 controller url 之前將不起作用

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

您還可以將 WASM wwwroot移動到根目錄並在 _App.cshtml 中添加啟動頁面以啟動 SPA。

有關更多信息，請參閱Javier Nelson 的 Github 網站，以及我寫的關於如何在同一網站上托管多個 SPA 的文章，其中包含 Github Repo。