Blazor UI：管理全局脚本与样式

您可以从模块或应用程序中将 JavaScript 和 CSS 文件添加到 Blazor 全局资源系统中。所有 JavaScript 和 CSS 文件将被添加到 global.js 和 global.css 文件中。在 Blazor WASM 项目中，您可以通过以下 URL 访问这些文件：

• https://localhost/global.js
• https://localhost/global.css

在模块中向全局资源系统添加 JavaScript 和 CSS

您的模块项目解决方案将包含两个相关的 Blazor 项目：

• MyModule.Blazor：此项目包含您的Blazor组件所需的JavaScript/CSS文件。MyApp.Blazor.Client (Blazor WASM) 项目将引用此项目。
• MyModule.Blazor.WebAssembly.Bundling：此项目用于将您的 JavaScript/CSS 文件添加到Blazor全局资源中。MyModule.Blazor (ASP.NET Core) 项目将引用此项目。

您需要在 MyModule.Blazor.WebAssembly.Bundling 项目中定义 JavaScript 和 CSS 贡献者类，以将文件添加到全局资源系统。

请使用 BlazorWebAssemblyStandardBundles.Scripts.Global 和 BlazorWebAssemblyStandardBundles.Styles.Global 作为包名称。

public class MyModuleBundleScriptContributor : BundleContributor
{
    public override void ConfigureBundle(BundleConfigurationContext context)
    {
        context.Files.AddIfNotContains("_content/MyModule.Blazor/libs/myscript.js");
    }
}

public class MyModuleBundleStyleContributor : BundleContributor
{
    public override void ConfigureBundle(BundleConfigurationContext context)
    {
        context.Files.AddIfNotContains("_content/MyModule.Blazor/libs/mystyle.css");
    }
}

[DependsOn(
    typeof(AbpAspNetCoreComponentsWebAssemblyThemingBundlingModule)
)]
public class MyBlazorWebAssemblyBundlingModule : AbpModule
{
    public override void ConfigureServices(ServiceConfigurationContext context)
    {
        Configure<AbpBundlingOptions>(options =>
        {
            // 添加脚本包
            options.ScriptBundles.Get(BlazorWebAssemblyStandardBundles.Scripts.Global)
                .AddContributors(typeof(MyModuleBundleScriptContributor));

            // 添加样式包
            options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global)
                .AddContributors(typeof(MyModuleBundleStyleContributor));
        });
    }
}

在应用程序中向全局资源系统添加 JavaScript 和 CSS

这与模块中的操作类似。您需要在 MyApp.Blazor.Client 项目中定义JavaScript和CSS贡献者类，以将文件添加到全局资源系统。

AbpBundlingGlobalAssetsOptions

您可以在 AbpBundlingOptions 类的 GlobalAssets 属性中配置 JavaScript 和 CSS 文件名。默认值为 global.js 和 global.css。

参考文档

• ASP.NET Core MVC 打包与压缩
• ABP全局资源 - Blazor WebAssembly应用中打包JavaScript/CSS文件的新方式