Statische Blazor-Dateien in ASP.NET Core

In diesem Artikel wird die Konfiguration der Blazor-App zum Bereitstellen statischer Dateien beschrieben.

Statische Blazor-Frameworkdateien

In Versionen vor .NET 8 werden statische Blazor-Frameworkdateien wie das Blazor-Skript über Static File Middleware bereitgestellt. Ab .NET 8 werden statische Blazor-Frameworkdateien mithilfe von Endpunktrouting zugeordnet, und Static File Middleware wird nicht mehr verwendet.

Statischer Webobjekt-Projektmodus

Dieser Abschnitt bezieht sich auf das .Client Projekt einer Blazor Web App.

Die erforderliche <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode> Einstellung im .Client Projekt einer Blazor Web App rückgängig machen statische Blazor WebAssembly Objektverhalten zurück zu den Standardwerten, sodass sich das Projekt als Teil des gehosteten Projekts verhält. Das Blazor WebAssembly SDK (Microsoft.NET.Sdk.BlazorWebAssembly) konfiguriert statische Webobjekte auf eine bestimmte Weise, um im „eigenständigen“ Modus mit einem Server zu arbeiten, der einfach die Ausgaben aus der Bibliothek verwendet. Dies ist nicht für eine Blazor Web-App geeignet, wobei der WebAssembly-Teil der App ein logischer Teil des Hosts ist und sich eher wie eine Bibliothek verhält. Beispielsweise macht das Projekt das Formatvorlagenbundle (z. B. BlazorSample.Client.styles.css) nicht verfügbar und stellt stattdessen nur den Host mit dem Projektbundle bereit, sodass der Host es in ein eigenes Formatvorlagenbundle aufnehmen kann.

Das Ändern des Werts (Default) von <StaticWebAssetProjectMode> oder das Entfernen der Eigenschaft aus dem .Client-Projekt wird nicht unterstützt.

Middleware für statische Dateien

Dieser Abschnitt gilt für serverseitige Blazor-Apps.

Konfigurieren Sie Middleware für statische Dateien, um statische Ressourcen für Clients bereitzustellen, indem Sie UseStaticFiles in der Anforderungsverarbeitungspipeline der App aufrufen. Weitere Informationen finden Sie unter Statische Dateien in ASP.NET Core.

Statische Dateien in Nicht-Development-Umgebungen

Dieser Abschnitt gilt für serverseitige statische Dateien.

Bei der lokalen Ausführung einer App sind statische Webressourcen nur in der Development-Umgebung standardmäßig aktiviert. Um statische Dateien für andere Umgebungen als Development während der lokalen Entwicklung und bei lokalen Tests (z. B. Staging) zu aktivieren, rufen Sie UseStaticWebAssets für WebApplicationBuilder in der Program-Datei auf.

Warnung

Rufen Sie UseStaticWebAssets auf, um die genaue Umgebung zu erhalten. So können Sie die Aktivierung des Features in der Produktion verhindern, da Dateien von anderen Speicherorten auf dem Datenträger, die vom Projekt abweichen getrennt werden, wenn der Aufruf in einer Produktionsumgebung erfolgt. Im Beispiel in diesem Abschnitt wird die Staging-Umgebung durch Aufrufen von IsStaging überprüft.

if (builder.Environment.IsStaging())
{
    builder.WebHost.UseStaticWebAssets();
}

Präfix für Blazor WebAssembly Ressourcen

Dieser Abschnitt gilt für Blazor-Web-Apps.

Mit der WebAssemblyComponentsEndpointOptions.PathPrefix-Endpunktoption können Sie die Pfadzeichenfolge festlegen, die das Präfix für Blazor WebAssembly-Ressourcen angibt. Der Pfad muss einem Referenzanwendungsprojekt Blazor WebAssembly entsprechen.

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "{PATH PREFIX}");

Im vorherigen Beispiel ist der {PATH PREFIX} Platzhalter das Pfadpräfix und muss mit einem Schrägstrich (/) beginnen.

Im folgenden Beispiel wird das Pfadpräfix auf /path-prefixfestgelegt:

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "/path-prefix");

Basispfad der statischen Webressource

Dieser Abschnitt gilt für eigenständige Blazor WebAssembly-Apps.

Beim Veröffentlichen der App werden die statischen Ressourcen der App, einschließlich Blazor-Frameworkdateien (_framework-Ordnerressourcen), standardmäßig im Stammpfad (/) in der veröffentlichten Ausgabe platziert. Die in der Projektdatei (.csproj) angegebene <StaticWebAssetBasePath>-Eigenschaft legt den Basispfad auf einen Nicht-Stammpfad fest:

<PropertyGroup>
  <StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>

Im vorherigen Beispiel entspricht der {PATH}-Platzhalter dem Pfad.

Ohne Festlegen der <StaticWebAssetBasePath>-Eigenschaft wird eine eigenständige App unter /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/ veröffentlicht.

Im vorherigen Beispiel ist der Platzhalter {TFM} der Zielframeworkmoniker (Target Framework Moniker (TFM)) (z. B. net6.0).

Wenn die <StaticWebAssetBasePath>-Eigenschaft in einer eigenständigen Blazor WebAssembly-App den Pfad zu veröffentlichten statischen Ressourcen auf app1 festlegt, ist /app1 der Stammpfad zur App in der veröffentlichten Ausgabe.

In der Projektdatei der eigenständigen Blazor WebAssembly-App (.csproj):

<PropertyGroup>
  <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>

In der veröffentlichten Ausgabe lautet der Pfad zur eigenständigen Blazor WebAssembly-App: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/.

Im vorherigen Beispiel ist der Platzhalter {TFM} der Zielframeworkmoniker (Target Framework Moniker (TFM)) (z. B. net6.0).

Dateizuordnungen und Optionen für statische Dateien

Dieser Abschnitt gilt für serverseitige statische Dateien.

Verwenden Sie einen der folgenden Ansätze, um zusätzliche Dateizuordnungen mit einem FileExtensionContentTypeProvider zu erstellen oder andere StaticFileOptions zu konfigurieren. In den folgenden Beispielen ist der Platzhalter {EXTENSION} die Dateierweiterung und der Platzhalter {CONTENT TYPE} der Inhaltstyp. Der Namespace für die folgende API lautet Microsoft.AspNetCore.StaticFiles.

• Konfigurieren Sie Optionen über die Dependency Injection (DI) in der Program-Datei mithilfe von StaticFileOptions:

  var provider = new FileExtensionContentTypeProvider();
  provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";
  
  builder.Services.Configure<StaticFileOptions>(options =>
  {
      options.ContentTypeProvider = provider;
  });
  
  app.UseStaticFiles();
  

• Übergeben Sie StaticFileOptions direkt an UseStaticFiles in der Program-Datei:

  var provider = new FileExtensionContentTypeProvider();
  provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";
  
  app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
  

Zusätzliche Ressourcen

Basispfad einer App