摘要：本文介绍如何将 .NET Aspire 添加到现有应用的前端项目中，以便于在现有项目中使用 .NET Aspire 的功能。通过添加 .NET Aspire 支持，我们可以简化云原生应用程序的生成过程，提升其可观察性和可靠性，同时显著提高开发人员的工作效率。
本文介绍如何将 .NET Aspire 添加到现有应用的前端项目中，以便于在现有项目中使用 .NET Aspire 的功能。通过添加 .NET Aspire 支持，我们可以简化云原生应用程序的生成过程，提升其可观察性和可靠性，同时显著提高开发人员的工作效率。
.NET Aspire 旨在简化云原生应用程序的生成过程，提升其可观察性和可靠性，同时显著提高开发人员的工作效率。.NET Aspire 通过以下五个主要方面实现这一目标：.NET Aspire 仪表板、应用程序业务流程、组件、服务发现和部署。每个部分都可以独立集成到现有应用程序中，或在新项目启动时整体采用。
如果你有一个现有前后端分离应用，在根据 .NET Aspire 的文档添加 Aspire 支持后，你需要单独处理你的前端项目。本文将以 Vue.js 项目为例介绍如何将 .NET Aspire 添加到现有应用的前端项目中。
然后按照向导操作即可，一般不需要修改内容：
至此，我们的后端项目就添加了 .NET Aspire 支持，并完成了基础的配置工作，整体体验还是非常流畅的。
在上一节中，我们已经成功的添加了 .NET Aspire 支持，接下来我们需要处理前端项目。
3.1 添加 Vue.js 项目目前工具并不支持多个项目的自动处理，尤其是前端的项目。我们需要单独处理前端项目，也就是在案例中的BlogCopilotUI项目。在开始之前我们需要检查AppHost项目，如果你的项目还是 8.0 的版本，则需要将项目升级到.NET Aspire 9.0，现有在项目配置中添加并升级已有的 Nuget 包： ...然后我们需要安装 NuGet 包Aspire.Hosting.NodeJs，这个包会帮助我们托管 Node.js 应用程序。并修改Program.csvar builder = DistributedApplication.CreateBuilder(args);var blogApi = builder.AddProject("blogcopilot").WithExternalHttpEndpoints;builder.AddNpmApp("vue", "../UI") .WithReference(blogApi) .WaitFor(blogApi) .WithHttpEndpoint(env: "PORT") .WithExternalHttpEndpoints;builder.Build.Run;这里我们添加了一个 NPM 应用程序，指定了 Vue.js 项目的路径../UI，并等待blogApi项目启动后再启动。同时这段代码将生成一个端口PORT，与blogApi项目使用的地址一起，通过环境变量暴露给 Vue.js 项目。这样 Vue.js 项目就可以访问到后端的 API，在 Aspire 控制台中我们也可以通过PORT端口访问到 Vue.js 项目。3.2 添加的环境变量此时我们可以先启用一下项目，在 Aspire 后台查看一下前端项目的环境变量，方便下一步使用，当然不看也可以的，其实就是services__[设置的blogApi项目标识]__http[s]__0原来的配置如下：
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'这里我们需要通过前面的环境变量export default defineConfig({ plugins: [ vue, ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, server: { host: true, port: parseInt(process.env.PORT ?? "5173"), proxy: { '/api': { target: process.env.services__blogcopilot__https__0 || process.env.services__blogcopilot__http__0, changeOrigin: true, } } }})注意：这里的process.env.services__blogcopilot__https__0和process.env.services__blogcopilot__http__0是 Aspire 自动生成的环境变量，用于获取后端 API 的地址，需要根据实际情况修改。至此，项目已经改造完毕，我们可以启动项目，通过 Aspire 控制台查看项目的运行情况：
[1]官方文档:https://learn.microsoft.com/en-us/dotnet/aspire/get-started/build-aspire-apps-with-nodejs/?WT.mc_id=DT-MVP-5005195
[2]示例代码:https://github.com/dotnet/aspire-samples/blob/main/samples/AspireWithJavaScript?WT.mc_id=DT-MVP-5005195
[3]使用 .NET Aspire 构建分布式应用:https://learn.microsoft.com/zh-cn/training/paths/dotnet-aspire/?WT.mc_id=DT-MVP-5005195
来源：opendotnet