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

【问题标题】：Blazor WebAssembly load different scripts for specific EnvironmentBlazor WebAssembly 为特定环境加载不同的脚本
【发布时间】：2020-11-14 04:23:28
【问题描述】：

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

Blazor WebAssembly 应用程序不是 Asp.NET Core 托管的。

在 .NET Core 中通常有 Environment Tag Helpers，如下例所示：

<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 WebAssembly Environment Variables 中已经讨论过的，环境标记帮助程序是服务器端代码，因此在 Blazor WASm 中不起作用。

现在我尝试根据 Blazor WebAssembly 中的环境变量找到包含/排除 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 中的开发、生产或暂存？

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

【问题讨论】：

标签： javascript c# asp.net-core blazor webassembly

【解决方案1】：

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

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

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

【讨论】：

谢谢，您是否介意提供一些有关如何“回退”到 .cshtml 文件的更多信息 - index.html 位于 Blazor WebAssembly (.Net Standard 2.1) 的 wwwroot 文件夹中？
感谢来自 mars 的 agua，这在带有服务器和客户端项目的“ASP.NET Core 托管”应用程序中运行良好。就我而言，不幸的是，我只能使用客户端项目。我相应地更新了我的问题。
你要在静态页面中部署？
您不需要 signalR，它只需要 Blazor 服务器。 Blazor WASM 不依赖于 SignalR
@azzurro123 可能是，可能不是 :) 可能有另一种解决方案可以解决您的问题，我考虑提取每个环境所需的配置并传递存储在 中的良好配置appsettings.{Env}.json 改为单个脚本。

【解决方案2】：

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

基本上，解决方法是根据解决方案在名为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();
}

【讨论】：

不幸的是，这不适用于
您不能在组件中使用脚本元素，这是不允许的，请参见：github.com/dotnet/aspnetcore/issues/16218
是的，但问题仍然存在，如何根据 Blazor Wasm 的 launchSettings.json 中设置的环境变量加载
对不起，我现在明白你的问题了，因为 Head 是一个剃须刀页面，它不允许脚本标签。我忽略了你的问题。如果我找到任何东西，我会回来的。

【解决方案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>

【讨论】：