如何在ASP.NET Core项目中根据宿主环境或Debug/Release模式条件执行JS代码？

首先明确：JavaScript无法直接使用C#的#if DEBUG编译指令或IWebHostEnvironment运行时判断的原生方式，但可以通过以下几种方案实现和ASPNETCORE_ENVIRONMENT自动同步的环境区分逻辑：

方案1：Razor视图注入全局环境变量（推荐，简单直接） #

利用ASP.NET Core的Razor视图可以直接访问IWebHostEnvironment的特性，在布局页中注入全局JS变量，让JS代码直接读取：

1. 在_Layout.cshtml的<head>标签内添加以下代码：

<script>
    // 直接从服务器端获取环境信息，自动和ASPNETCORE_ENVIRONMENT同步
    window.appEnv = {
        environmentName: '@WebHostEnvironment.EnvironmentName',
        isDebug: @WebHostEnvironment.IsDevelopment().ToString().ToLower()
    };
</script>

2. 在JS代码中使用该变量进行判断：

class MyClass {
    constructor() {        
        this.checkEvery = window.appEnv.isDebug ? 30 : 10;
        this.checkDuration = window.appEnv.isDebug ? 's' : 'm';
    }
}

这种方式无需额外构建步骤，部署时会自动根据当前环境输出对应变量值，完全保证和后端环境的一致性。

方案2：前端构建工具的环境变量替换（适合工程化场景） #

如果项目使用Webpack、Gulp等前端构建工具，可以通过构建流程将ASPNETCORE_ENVIRONMENT传递给前端，实现编译时的变量替换：

1. 在项目的.csproj文件中添加预构建事件，根据当前环境设置Node环境变量：

<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec Command="set NODE_ENV=$(ASPNETCORE_ENVIRONMENT) &amp;&amp; npm run build" />
</Target>

2. 以Webpack为例，配置DefinePlugin替换JS中的占位符：

// webpack.config.js
const webpack = require('webpack');
const nodeEnv = process.env.NODE_ENV || 'Development';

module.exports = {
    // 其他配置...
    plugins: [
        new webpack.DefinePlugin({
            'process.env.IS_DEBUG': JSON.stringify(nodeEnv === 'Development'),
            'process.env.ENV_NAME': JSON.stringify(nodeEnv)
        })
    ]
};

3. JS代码中直接使用替换后的变量：

class MyClass {
    constructor() {        
        this.checkEvery = process.env.IS_DEBUG ? 30 : 10;
        this.checkDuration = process.env.IS_DEBUG ? 's' : 'm';
    }
}

构建完成后，JS代码中的变量会被硬编码为对应环境的值，生产环境下不会保留判断逻辑，性能更优。

方案3：后端API获取环境配置（适合动态场景） #

如果需要在运行时动态获取环境信息，可以通过后端接口返回环境数据：

1. 创建一个返回环境信息的API接口：

[ApiController]
[Route("api/env")]
public class EnvironmentController : ControllerBase
{
    private readonly IWebHostEnvironment _webHostEnv;

    public EnvironmentController(IWebHostEnvironment webHostEnv)
    {
        _webHostEnv = webHostEnv;
    }

    [HttpGet]
    public IActionResult GetEnvironmentInfo()
    {
        return Ok(new
        {
            IsDebug = _webHostEnv.IsDevelopment(),
            EnvironmentName = _webHostEnv.EnvironmentName
        });
    }
}

2. JS代码中请求接口后初始化配置：

class MyClass {
    async init() {
        try {
            const response = await fetch('/api/env');
            const envInfo = await response.json();
            this.checkEvery = envInfo.IsDebug ? 30 : 10;
            this.checkDuration = envInfo.IsDebug ? 's' : 'm';
        } catch (err) {
            // 异常 fallback 到生产环境配置
            this.checkEvery = 10;
            this.checkDuration = 'm';
        }
    }
}

// 使用时先调用init
const myInstance = new MyClass();
myInstance.init();

这种方案适合需要动态切换环境的场景，但需要额外的网络请求，初始化会有一定延迟。

内容的提问来源于stack exchange，提问作者dpant