Vite 4.4.9开发服务器快捷键无响应问题求助

问题描述 #

Vite开发服务器运行一段时间后，Ctrl+C、h、q等所有快捷键均无法触发响应，但服务器本身仍能正常提供应用服务。已尝试简化配置（仅保留react()插件），问题依旧，疑似SIG*信号丢失，但无法定位具体原因。

当前Vite配置代码：

import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';
import checker from 'vite-plugin-checker';
import path from 'path';

export default defineConfig(({ mode }) => {
  let env = loadEnv(mode, process.cwd(), "VITE_APP");

  env.NODE_ENV = mode;

  const envWithProcessPrefix = {
    "process.env": `${JSON.stringify(env)}`,
  };

  return {
    build: {
      outDir: 'build',
      sourcemap: true,
    },
    server: {
      port: process.env.PORT ?? 3000,
      watch: {
        ignored: [
          path.resolve(__dirname, './coverage'),
          path.resolve(__dirname, './build'),
          path.resolve(__dirname, './storybook-static'),
          /\.test\.(ts|tsx)$/
        ]
      }
    },
    define: envWithProcessPrefix,
    plugins: [
      splitVendorChunkPlugin(),
      react({
        exclude: /\.test\.(ts|tsx)$/
      }),
      tsconfigPaths(),
      svgr(
        {
          svgrOptions: {}
        }
      ),
      checker({
        typescript: true,
      }),
    ],
  };
});

排查方向与解决方案 #

1. 先排除vite-plugin-checker的干扰 #

配置中启用的checker插件会启动独立子进程做类型检查，大概率是子进程抢占了终端的信号监听。先临时注释掉该插件，观察问题是否消失：

plugins: [
  splitVendorChunkPlugin(),
  react({
    exclude: /\.test\.(ts|tsx)$/
  }),
  tsconfigPaths(),
  svgr({
    svgrOptions: {}
  }),
  // 临时注释checker
  // checker({
  //   typescript: true,
  // }),
],

2. 升级Node.js版本 #

部分Node.js 18.x早期版本存在子进程信号处理的bug，建议升级到Node.js 18.17+或20.x稳定版，再测试问题是否复现。

3. 检查终端环境的信号传递 #

• 如果用的是Windows WSL，切换到原生Windows终端或Linux终端测试，WSL有时会出现信号传递兼容问题
• 避免使用嵌套终端（比如VS Code终端里开tmux），多层终端可能导致信号无法正确传递到Vite主进程

4. 验证信号是否真的丢失 #

在项目根目录创建测试脚本，手动监听Vite进程的信号，确认信号是否能被正常捕获：

// signal-test.js
process.on('SIGINT', () => {
  console.log('收到SIGINT信号，准备退出');
  process.exit(0);
});

process.on('SIGQUIT', () => {
  console.log('收到SIGQUIT信号');
});

// 启动Vite
require('vite').createServer(require('./vite.config.ts')).then(server => {
  server.listen();
});

用node signal-test.js启动服务，触发快捷键时查看是否有日志输出，判断信号是否真的丢失。

5. 排查splitVendorChunkPlugin的潜在问题 #

splitVendorChunkPlugin是Vite 5+的内置插件，虽然官方维护，但也可能存在边缘场景bug。可以临时禁用它，观察问题是否缓解：

plugins: [
  // splitVendorChunkPlugin(),
  react({
    exclude: /\.test\.(ts|tsx)$/
  }),
  // ...其他插件
],

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