Blazor WebAssembly 环境变量

Question

Blazor WebAssembly 环境变量

azz*_*123 14 javascript c# webassembly asp.net-core blazor

我目前正在开发一个 .NET Standard 2.1 Blazor WebAssembly 应用程序。我尝试根据环境变量包含或排除样式表。

在 .NET Core 中，通常有环境标签助手，如下例所示：

<environment include="Development">
    <link rel="stylesheet" href="css/style.css" type="text/css" />
</environment>

<environment exclude="Development">
    <link rel="stylesheet" href="css/style.min.css" type="text/css" />
</environment>

Run Code Online (Sandbox Code Playgroud)

这在 Blazor 服务器应用程序中工作得非常好，但在 Blazor WASm 中却没有，因为这是客户端代码。

因此，我试图找到一个很好的解决方案，根据Blazor WebAssembly 中的环境变量包含/排除样式表。

我目前的方法是使用 JSInterop 从我的 Blazor WASm Program.cs 文件中调用 JavaScript 辅助方法，并根据环境变量删除样式表：

await jsInterop.InvokeVoidAsync("helpers.setup", "Development");

Run Code Online (Sandbox Code Playgroud)

我在客户端的 JavaScript 如下所示：

window.helpers = {
    setup: (environment) => {

        if (environment === "Development") {
            // remove production styles
        }

        if (environment !== "Development") {
            // remove development styles
        }
    }
};

Run Code Online (Sandbox Code Playgroud)

这个解决方案的问题是，我想将我的样式放入我的头文件中，并将它们分组到一个<section>元素或类似的东西中——这在有效的 HTML5 中不起作用。

您如何处理 Blazor WebAssembly 中的开发/生产环境？

如何根据项目设置 (launchsettings.json) 中设置的环境变量排除或包含特定的 CSS 文件？

Answer 1

Cob*_*byC 11

免责声明：

这只是我尝试过的似乎有效的方法。我找不到任何支持这样做的文档，也找不到任何说不要这样做的文件。如果有任何官方文件，请告诉我。

该文档的状态：

在本地运行应用程序时，环境默认为 Development。发布应用程序时，环境默认为生产。

再往下，它确实提到了如何通过将文件发布到 IIS 时生成的 web.config 设置环境。还有对在 ASP.NET Core 中使用多个环境的引用。和托管和部署 ASP.NET Core Blazor WebAssembly

然而这就是我所做的。

望着Program.cs这是由生成的文件新的Web组件项目模板，将builder被创建WebAssemblyHostBuilder.CreateDefault(args);这一定意味着所有的默认服务必须已经在服务容器注册。

这将包括IWebAssemblyHostEnvironment配置服务。

下一行 builder.RootComponents.Add<App>("app");添加了文件中使用的 App<app></app>根组件index.html。

那么，为什么不尝试创建一个 Head<head></head> 组件，看看会发生什么。

我创建了一个 Head razor 组件并将其命名为Head.razor包含通常位于标签之间的所有html<head></head>。

@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IWebAssemblyHostEnvironment hostEnv

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />

@*Check the environment value*@
@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" />
}

@code {}

Run Code Online (Sandbox Code Playgroud)

因为它是一个组件，你可以注入IWebAssemblyHostEnvironment和检查.IsDevelopment()，.IsProduction()等扩展方法的值。

我保留了文件中的原始<head>标签，因为它index.html的内容<head>...gets overwritten...</head>似乎被完全覆盖了。

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWasmApp</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>    
...
...

Run Code Online (Sandbox Code Playgroud)

还保留对文件<head>的引用的标签cs/app.css不会改变应用程序加载时的外观....

我将Head班级注册到班级builder.RootComponents集合中Program。

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();
}

Run Code Online (Sandbox Code Playgroud)

我在wwwroot/css文件夹中添加了 2 个 css 文件debug.css，live.css每个文件都包含一个简单的body { background-color:*red or blue* }样式。

在launchSettings.json文件中，在配置文件部分，将设置IIS Express : environmentVariables : ASPNETCORE_ENVIRONMENT为“开发”，并将其下的设置[YourAppName] : environmentVariables : ASPNETCORE_ENVIRONMENT为“生产”。

"profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
    },
    "BlazorWasmApp": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Production"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
    }
  }

Run Code Online (Sandbox Code Playgroud)

使用IIS Express配置文件（开发）启动应用程序时，背景为红色，使用[YourAppName]配置文件（生产）启动应用程序时，背景为蓝色。

当<head></head>使用开发者工具查看标签时，head 标签的内容包含根据环境的 css 引用。

IIS 快递：

BlazorWasmApp（我的应用程序配置文件）：

归档时间：	5 年，10 月前
查看次数：	4937 次
最近记录：	5 年，10 月前