Blazor WebAssembly为特定环境加载不同的脚本 [英] Blazor WebAssembly load different scripts for specific Environment

问题描述

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

Blazor WebAssembly应用程序未托管Asp.NET Core.

.NET Core中通常具有环境标记帮助器，如以下示例所示:

 < environment include =开发">< script src =" js/app.js"</script>< script src =" js/helpers.js"</script></环境><环境排除＝"发展>< script src =" js/site.min.js"</script></环境> 

如该问题 Blazor WebAssembly环境变量所述，环境标记帮助程序是服务器边码，因此无法在Blazor WASm中使用.

现在，我尝试根据Blazor WebAssembly中的Environment变量找到一种包含/排除JavaScript文件的好的解决方案.

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

  @使用Microsoft.AspNetCore.Components.WebAssembly.Hosting@inject IWebAssemblyHostEnvironment hostEnv@ *检查环境值* @@if(hostEnv.IsDevelopment()){< script src =" js/app.js"</script>< script src =" js/helpers.js"</script>}别的{< script src =" js/site.min.js"</script>}@代码 {} 

不幸的是，这是行不通的，因为在Blazor组件(.razor文件)中不允许使用< script> 元素.

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

如何根据环境变量(即Blazor Webassembly中的开发，生产或登台)加载不同的脚本?

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

解决方案

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

 公共无效配置(IApplicationBuilder应用){...app.UseEndpoints(endpoints =>{...endpoints.MapFallbackToPage("/BlazorApp")；}} 

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

I'm currently working on a .NET Standard 2.1 Blazor WebAssembly application. I try to include or exclude JavaScript files in my index.html according to an environment variable.

The Blazor WebAssembly App is NOT Asp.NET Core hosted.

In .NET Core there are usually Environment Tag Helpers like in the following example:

<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>

As already discussed in this question Blazor WebAssembly Environment Variables, the Environment Tag Helpers are server side code and thus don't work in Blazor WASm.

Now I try to find a good solution to include/exclude JavaScript files according to the Environment variable in Blazor WebAssembly.

The first idea was, similar like for CSS, to create a component called <Scripts> to load the different script files on the index.html like this:

@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 {}

Unfortunately this doesn't work, because the <script> Element is not allowed to be used in a Blazor component (.razor file).

The following error occurs: The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user. ... Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location. ... https://go.microsoft.com/fwlink/?linkid=872131

How do you load different scripts according to the Environment Variable i.e. Development, Production or Staging in Blazor Webassembly?

Do you know how to solve this problem?

解决方案

Simply copy your index.html code in a .cshtml (named BlazorApp.cshtml in the following sample) in your server project and fallback to this page.

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

And update the code with <environment> tags for your conveniance.

这篇关于Blazor WebAssembly为特定环境加载不同的脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！