Blazor WebAssembly 为特定环境加载不同的脚本

Question

我目前正在开发 .NET Standard 2.1 Blazor WebAssembly 应用程序。我尝试根据环境变量 在我的 index.html 中包含或排除 JavaScript 文件。

Blazor WebAssembly 应用不是 Asp.NET 核心托管。

在 .NET Core 中通常有环境标签助手，如下例所示：

<environment include="Development">
    <script src="js/app.js"></script>
    <script src="js/helpers.js"></script>
</environment>

<environment exclude="Development">
    <script src="js/site.min.js"></script>
</environment>

正如这个问题中已经讨论的那样，环境标签帮助程序是服务器端代码，因此在 Blazor WASm 中不起作用。

现在我尝试根据Blazor WebAssembly中的环境变量找到include/exclude JavaScript个文件的好的解决方案

第一个想法是，类似于 CSS，创建一个名为 <Scripts> 的组件来加载 index.html 上的不同脚本文件，如下所示：

@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IWebAssemblyHostEnvironment hostEnv
   
@*Check the environment value*@
@if (hostEnv.IsDevelopment())
{
    <script src="js/app.js"></script>
    <script src="js/helpers.js"></script>
}
else
{
    <script src="js/site.min.js"></script>
}

@code {}

不幸的是，这不起作用，因为 <script> 元素不允许在 Blazor 组件（.razor 文件）中使用。

出现以下错误：脚本元素允许作者在他们的文档中包含动态脚本和数据块。该元素不代表用户的内容。 ... 脚本标签不应放置在组件内，因为它们不能动态更新。要解决此问题，请将脚本标记移动到 'index.html' 文件或其他静态位置。 ... https://go.microsoft.com/fwlink/?linkid=872131

在 Blazor Webassembly 中如何根据环境变量加载不同的脚本，即开发、生产或暂存？

你知道如何解决这个问题吗？

Answer 1

只需将您的 index.html 代码复制到服务器项目中的 .cshtml（在以下示例中命名为 BlazorApp.cshtml）中，然后回退到此页面。

public void Configure(IApplicationBuilder app)
{
...
    app.UseEndpoints(endpoints =>
    {
        ...
        endpoints.MapFallbackToPage("/BlazorApp");
    }
}

并使用 <environment> 标签更新代码以方便您使用。

Answer 2

请检查中的解决方案（与上面链接的问题相同），这似乎有效。

基本上，解决方法是根据解决方案在名为 Head.razor 的新组件中使用它：

@inject IWebAssemblyHostEnvironment hostEnv

@if (hostEnv.IsDevelopment())
{
    <title>BlazorWasmApp - In Debug</title>
    <link href="css/debug.css" rel="stylesheet" />
}
else
{
    <title>BlazorWasmApp - Not Debug</title>
    <link href="css/live.css" rel="stylesheet" />
}

新Head.razor组件：

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);            
    builder.RootComponents.Add<App>("app");

    //Add the Head to root components
    builder.RootComponents.Add<Head>("head");            
            
    builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });           
    await builder.Build().RunAsync();
}

Answer 3

我想在开发期间添加 Tailwind CDN 脚本标签。我最终使用了以下解决方案：

index.html

    <script src="_framework/blazor.webassembly.js"></script>
    <script>
        // If localhost, add tailwind CDN (or any other script that you want)
        if (window.location.hostname == 'localhost') {
                var customScript = document.createElement('script');
                customScript.setAttribute('src', 'https://cdn.tailwindcss.com');
                document.head.appendChild(customScript);
        }
    </script>

Blazor WebAssembly 为特定环境加载不同的脚本

Blazor WebAssembly load different scripts for specific Environment

javascript

c#

webassembly

asp.net-core

blazor