如何在.NET Aspire中实现React Vite应用与API的自动关联？

方法1：通过Aspire配置文件映射环境变量（适配多环境） #

利用Aspire的配置文件实现环境变量映射，避免硬编码，同时支持开发和生产环境：

1. 在Aspire项目的appsettings.json中添加环境变量映射规则：

{
  "services": {
    "myapp-home-se": {
      "environmentVariables": {
        "VITE_API_URL": "{{services.myapphomeapise.api.0}}"
      }
    }
  }
}

2. 移除代码中硬编码的WithEnvironment("VITE_API_URL", ...)，保留其他配置：

builder.AddNpmApp("myapp-home-se", "../MyApp.Home.se", "dev")
    .WithReference(api)
    .WaitFor(api)
    .WithEnvironment("BROWSER", "none")
    .WithHttpEndpoint(env: "VITE_PORT")
    .WithExternalHttpEndpoints()
    .PublishAsDockerFile();

此配置下，Aspire会自动将API服务的地址注入为带VITE_前缀的环境变量，本地开发和Docker部署场景均能生效。

方法2：在Vite项目中自定义环境变量读取逻辑 #

无需修改Aspire配置，直接在前端侧处理原始环境变量：

1. 在Vite项目的vite.config.js（或.ts）中添加变量转换逻辑：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  define: {
    'import.meta.env.VITE_API_URL': JSON.stringify(process.env['services__myapphomeapise__api__0'])
  }
});

2. 前端代码中正常通过import.meta.env.VITE_API_URL访问API地址即可。

方法3：使用Aspire服务发现（生产环境推荐） #

生产环境下优先使用Aspire的服务发现能力，避免依赖环境变量硬编码：

1. 在API项目的Program.cs中启用服务发现：

builder.AddServiceDiscovery();
builder.Services.AddHttpClient();
// 其他业务配置...

2. 在Vite项目中配置代理，通过服务发现的地址转发请求：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: process.env['services__myapphomeapise__api__0'],
        changeOrigin: true
      }
    }
  }
});

前端直接请求/api/xxx即可，Aspire会自动处理容器化环境下的服务地址解析。

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