我目前正在开发 .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
TA贡献1874条经验 获得超12个赞
只需将 index.html 代码复制到服务器项目中的 .cshtml（在以下示例中名为 BlazorApp.cshtml）中，然后回退到此页面。
public void Configure(IApplicationBuilder app)
{
...
app.UseEndpoints(endpoints =>
{
...
endpoints.MapFallbackToPage("/BlazorApp");
}
}
并使用标签更新代码以<environment>方便您。
慕婉清6462132
TA贡献1804条经验 获得超2个赞
我想在开发期间添加 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
TA贡献1785条经验 获得超8个赞
请检查此答案中的解决方案（与上面链接的问题相同），这似乎有效。
基本上，解决方法是在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();
}
添加回答
举报
0/150
提交
取消