WebAssembly为特定环境加载不同的脚本
我目前正在开发一个.NET标准2.1BLAZOR WebAssembly应用程序。我尝试根据环境变量在我的中包含或排除JavaScript文件。
Blazor应用程序不是托管的Asp.NET核心。
在.NET核心中，通常有环境标记帮助器，如下面的示例所示：
<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中工作。
现在，我试图找到一个很好的解决方案，根据JavaScript中的环境变量来包含/排除WebAssembly文件。
第一个想法类似于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”文件或其他静态位置。
如何根据环境变量加载不同的脚本，即在Blazor组件中进行开发、生产或分阶段？
你知道如何解决这个问题吗？
回答 3
Stack Overflow用户
发布于 2020-07-24 10:16:05
只需将index.html代码复制到服务器项目中的.cshtml (以下示例中命名为BlazorApp.cshtml )中，然后返回到此页面。
public void Configure(IApplicationBuilder app)
{
...
app.UseEndpoints(endpoints =>
{
...
endpoints.MapFallbackToPage("/BlazorApp");
}
}并为您的召集器更新带有<environment>标记的代码。
Stack Overflow用户
发布于 2021-12-10 21:07:39
我想在开发期间添加Tailwind脚本标记。最后，我使用了以下解决方案：
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>Stack Overflow用户
发布于 2020-07-24 10:17:07
请检查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();
}https://stackoverflow.com/questions/63071255
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号