ASP.NET React应用中Vite开发服务器无法随应用关闭的问题

你当前的配置可正常启动ASP.NET与Vite服务，但停止ASP.NET时Vite进程会残留并占用5173端口，以下是几种可行的解决办法：

问题场景配置 #

你的package.json启动脚本：

"scripts": {
  "start": "vite" 
}

Startup.cs中的SPA配置：

spa.Options.SourcePath = "ClientApp";

if (env.IsDevelopment())
{
    spa.Options.DevServerPort = 5173;
    spa.UseReactDevelopmentServer(npmScript: "start");
}

方案1：通过ASP.NET生命周期终止Vite进程 #

在ASP.NET中注册应用停止时的回调，主动杀死占用5173端口的Node进程（Vite基于Node运行）。

在Startup.cs的Configure方法末尾添加以下代码：

using System.Diagnostics;

// 获取应用生命周期服务
var appLifetime = app.ApplicationServices.GetRequiredService<IHostApplicationLifetime>();

// 注册应用停止时的处理逻辑
appLifetime.ApplicationStopping.Register(() =>
{
    // 执行命令杀死占用5173端口的进程
    var killProcessCmd = Process.Start(new ProcessStartInfo
    {
        FileName = "cmd.exe",
        Arguments = "/c netstat -ano | findstr :5173 | findstr LISTENING | for /f \"tokens=5\" %a in ('more') do taskkill /f /pid %a",
        WindowStyle = ProcessWindowStyle.Hidden,
        CreateNoWindow = true
    });
    killProcessCmd?.WaitForExit();
});

这段代码会在ASP.NET应用停止时，通过命令行查找并强制终止占用5173端口的进程。

方案2：修改npm启动脚本，让Vite随父进程退出 #

通过Node脚本监听父进程的退出信号，主动终止Vite进程：

1. 在ClientApp目录下创建start-vite.js文件：

const { spawn } = require('child_process');

// 启动Vite进程
const viteProcess = spawn('vite');

// 监听父进程的终止信号，同步终止Vite
process.on('SIGINT', () => {
  viteProcess.kill('SIGINT');
  process.exit(0);
});

process.on('SIGTERM', () => {
  viteProcess.kill('SIGTERM');
  process.exit(0);
});

// 监听Vite进程的退出状态，同步退出Node脚本
viteProcess.on('exit', (code) => {
  process.exit(code);
});

2. 修改package.json的启动脚本：

"scripts": {
  "start": "node start-vite.js"
}

这样当ASP.NET终止npm父进程时，Node脚本会收到信号并杀死Vite进程。

方案3：使用代理模式+并行启动工具 #

改用ASP.NET代理到独立启动的Vite服务，通过concurrently同时启动两个进程，关闭时一并终止：

1. 修改Startup.cs的SPA配置，替换为代理模式：

spa.Options.SourcePath = "ClientApp";

if (env.IsDevelopment())
{
    // 代理到本地Vite开发服务器
    spa.UseProxyToSpaDevelopmentServer("http://localhost:5173");
}

2. 安装并行启动工具concurrently：

npm install concurrently --save-dev

3. 修改package.json脚本，添加并行启动命令：

"scripts": {
  "start": "vite",
  "start:aspnet": "dotnet run",
  "dev": "concurrently \"npm start\" \"npm run start:aspnet\""
}

4. 启动项目时运行：

npm run dev

此时ASP.NET和Vite会在同一个终端运行，按下Ctrl+C或关闭终端时，两个进程都会被终止。

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