Blazor WebAssembly 为特定环境加载不同的脚本
我目前正在开发 .NET Standard 2.1 Blazor WebAssembly 应用程序。我尝试根据环境变量在我的 index.html 中包含或排除 JavaScript 文件。
Blazor WebAssembly 应用不是 Asp.NET Core 托管的。
在 .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 WebAssembly Environment Variables中已经讨论的那样，Environment Tag Helpers 是服务器端代码，因此在 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 中如何根据环境变量（即开发、生产或暂存）加载不同的脚本？
你知道如何解决这个问题吗？
函数式编程3回答
-
HUWWW
只需将 index.html 代码复制到服务器项目中的 .cshtml（在以下示例中名为 BlazorApp.cshtml）中，然后回退到此页面。public void Configure(IApplicationBuilder app){... app.UseEndpoints(endpoints => { ... endpoints.MapFallbackToPage("/BlazorApp"); }}并使用标签更新代码以<environment>方便您。 -
慕婉清6462132
我想在开发期间添加 Tailwind CDN 脚本标签。我最终使用了以下解决方案：索引.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> -
慕的地10843
请检查此答案中的解决方案（与上面链接的问题相同），这似乎有效。基本上，解决方法是在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();}
随时随地看视频慕课网APP
相关分类
JavaScript