个人中心
gpt4 book ai didi

javascript - Blazor WebAssembly 环境变量

转载 作者：行者123 更新时间：2023-12-01 15:00:32 25 4
gpt4 key购买 nike

我目前正在开发一个 .NET Standard 2.1 Blazor WebAssembly 应用程序。
我尝试根据环境变量包含或排除样式表。
在 .NET Core 中，通常有 Environment Tag Helpers，如下例所示:

<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>
这在 Blazor Server 应用程序中工作得非常好，但在 Blazor WASm 中却不行，因为这是客户端代码。
因此，我试图为 找到一个好的解决方案。根据环境变量包含/排除样式表在 Blazor WebAssembly 中。
我目前的方法是使用 JSInterop 从我的 Blazor WASm Program.cs 文件中调用 JavaScript 帮助器方法，并根据环境变量删除样式表: 
await jsInterop.InvokeVoidAsync("helpers.setup", "Development");
我在客户端的 JavaScript 如下所示: 
window.helpers = {
    setup: (environment) => {

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

        if (environment !== "Development") {
            // remove development styles
        }
    }
};
这个解决方案的问题是，我想将我的样式放入我的头文件并将它们分组到 <section>元素或类似的东西 - 在有效的 HTML5 中不起作用。
您如何处理 Blazor WebAssembly 中的开发/生产环境？
如何根据项目设置(launchsettings.json)中设置的环境变量排除或包含特定的CSS文件？

最佳答案

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

When running an app locally, the environment defaults to Development.When the app is published, the environment defaults to Production.


再往下，它确实提到了如何通过将文件发布到 IIS 时生成的 web.config 来设置环境。
也有引用 Use multiple environments in ASP.NET Core.和 Host and deploy ASP.NET Core Blazor WebAssembly
然而，这就是我所做的。
看着 Program.cs由新的 Web 程序集项目模板生成的文件 builder由 WebAssemblyHostBuilder.CreateDefault(args); 创建这必须意味着所有默认服务必须已经在服务容器中注册。
这将包括 IWebAssemblyHostEnvironment配置服务。
下一行 builder.RootComponents.Add<App>("app");添加应用程序 <app></app>根 组件 用于 index.html文件。
那么，为什么不尝试创建一个 Head <head></head> 组件 看看会发生什么。
我创建了一个 Head razor 组件并将其命名为 Head.razor包含通常存在于 <head></head> 之间的所有 html标签。 
@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 {}
因为是 组件 您可以注入(inject) 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>    
...
...
还留下 <head>带有对 cs/app.css 的引用的标记当应用程序正在加载时，文件不会改变它的外观......
我注册了 Head类到 builder.RootComponents收藏在 Program类(class)。 
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();
}
我在 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}"
    }
  }
使用 IIS Express 配置文件(开发)启动应用程序时，背景为 红色 当使用 [YourAppName] 配置文件(生产)启动应用程序时，背景为 蓝色 .
当查看 <head></head>使用开发者工具的标签 head 标签的内容包含根据环境的 css 引用。
IIS express :
Red Dev
BlazorWasmApp(我的应用配置文件):
Blue Prod

关于javascript - Blazor WebAssembly 环境变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63052399/

25 4 0
文章推荐： python - 在 3d 空间中对 1d 曲线进行良好的插值/拟合——Python
文章推荐： java - 如何在 Axis1 中使用模块？
文章推荐： java - 如何在 Android 手机唤醒时可靠地检测互联网连接
文章推荐： latex - 如何让 pandoc 单独留下百分号？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com