ASP.NET file statici core Blazor

Questo articolo descrive la Blazor configurazione dell'app per la gestione di file statici.

Blazor file statici del framework

Nelle versioni precedenti a .NET 8, Blazor i file statici del framework, ad esempio lo Blazor script, vengono gestiti tramite middleware di file statici. In .NET 8 o versione successiva, Blazor i file statici del framework vengono mappati usando il routing degli endpoint e il middleware dei file statici non viene più usato.

Modalità progetto asset Web statico

Questa sezione si applica al .Client progetto di un'app Blazor Web.

L'impostazione .Client richiesta <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode> nel progetto di un'app Blazor Web ripristina Blazor WebAssembly i comportamenti degli asset statici ai valori predefiniti, in modo che il progetto si comporti come parte del progetto ospitato. L'SDK Blazor WebAssembly (Microsoft.NET.Sdk.BlazorWebAssembly) configura gli asset Web statici in modo specifico per funzionare in modalità "autonoma" con un server che usa semplicemente gli output dalla libreria. Questo non è appropriato per un'app Blazor Web, in cui la parte WebAssembly dell'app è una parte logica dell'host e deve comportarsi in modo più simile a una libreria. Ad esempio, il progetto non espone il bundle di stili (ad esempio , BlazorSample.Client.styles.css) e fornisce invece solo l'host con il bundle di progetto, in modo che l'host possa includerlo nel proprio bundle di stili.

La modifica del valore (Default) di <StaticWebAssetProjectMode> o la rimozione della proprietà dal .Client progetto non è supportata.

Middleware dei file statici

Questa sezione si applica alle app lato Blazor server.

Configurare il middleware dei file statici per gestire asset statici ai client chiamando UseStaticFiles nella pipeline di elaborazione delle richieste dell'app. Per altre informazioni, vedere File statici in ASP.NET Core.

File statici in ambienti nonDevelopment

Questa sezione si applica ai file statici lato server.

Quando si esegue un'app in locale, gli asset Web statici sono abilitati solo per impostazione predefinita nell'ambiente Development . Per abilitare i file statici per ambienti diversi da Development durante lo sviluppo locale e il test (ad esempio, Staging), chiamare UseStaticWebAssets nel WebApplicationBuilderProgram file .

Avviso

Chiamare UseStaticWebAssets l'ambiente esatto per impedire l'attivazione della funzionalità nell'ambiente di produzione, perché serve i file da percorsi separati su disco diverso dal progetto se chiamato in un ambiente di produzione. L'esempio in questa sezione controlla l'ambiente Staging chiamando IsStaging.

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

Prefisso per Blazor WebAssembly gli asset

Questa sezione si applica a Blazor App Web.

Usare l'opzione WebAssemblyComponentsEndpointOptions.PathPrefix endpoint per impostare la stringa di percorso che indica il prefisso per Blazor WebAssembly gli asset. Il percorso deve corrispondere a un progetto di applicazione a cui si fa Blazor WebAssembly riferimento.

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

Nell'esempio precedente il {PATH PREFIX} segnaposto è il prefisso del percorso e deve iniziare con una barra (/).

Nell'esempio seguente il prefisso del percorso è impostato su /path-prefix:

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

Percorso di base dell'asset Web statico

Questa sezione si applica alle app autonome Blazor WebAssembly .

Per impostazione predefinita, la pubblicazione dell'app inserisce gli asset statici dell'app, inclusi Blazor i file framework (_framework asset di cartelle), nel percorso radice (/) nell'output pubblicato. La <StaticWebAssetBasePath> proprietà specificata nel file di progetto (.csproj) imposta il percorso di base su un percorso non radice:

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

Nell'esempio precedente il {PATH} segnaposto è il percorso.

Senza impostare la <StaticWebAssetBasePath> proprietà, un'app autonoma viene pubblicata in /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/.

Nell'esempio precedente il {TFM} segnaposto è il moniker del framework di destinazione (TFM), ad esempio net6.0.

Se la <StaticWebAssetBasePath> proprietà in un'app autonoma Blazor WebAssembly imposta il percorso dell'asset statico pubblicato su app1, il percorso radice dell'app nell'output pubblicato è /app1.

Nel file di progetto dell'app autonoma Blazor WebAssembly (.csproj):

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

Nell'output pubblicato il percorso dell'app autonoma Blazor WebAssembly è /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/.

Nell'esempio precedente il {TFM} segnaposto è il moniker del framework di destinazione (TFM), ad esempio net6.0.

Mapping di file e opzioni di file statici

Questa sezione si applica ai file statici lato server.

Per creare mapping di file aggiuntivi con un oggetto o configurare un FileExtensionContentTypeProvider altro StaticFileOptions, usare uno degli approcci seguenti. Negli esempi seguenti il {EXTENSION} segnaposto è l'estensione di file e il {CONTENT TYPE} segnaposto è il tipo di contenuto. Lo spazio dei nomi per l'API seguente è Microsoft.AspNetCore.StaticFiles.

• Configurare le opzioni tramite l'inserimento Program delle dipendenze nel file usando StaticFileOptions:

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

• Passare direttamente StaticFileOptions a UseStaticFiles nel Program file:

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

Risorse aggiuntive

Percorso di base dell'app