使用Webpack-simple模板的Vue项目：关闭devServer后端口仍被占用

我碰到过好几次一模一样的情况——在Windows的Git Bash里用Ctrl+C终止Webpack Dev Server后，端口经常没被彻底释放，导致下次启动直接报错。下面给你几个实用的解决办法：

1. 手动杀掉占用端口的进程（应急方案） #

这是最快解决当前问题的方法：

• 打开**系统自带的命令提示符（CMD）**或PowerShell（别用Git Bash，查进程用系统终端更准确），执行命令查找占用1123端口的进程PID：

  netstat -ano | findstr :1123
  

  输出结果的最后一列数字就是进程的PID，比如12345。
• 接着执行命令强制终止该进程：

  taskkill /F /PID 12345
  

  把12345替换成你查到的PID即可，/F参数是强制终止，确保进程被彻底清除。

2. 配置Webpack自动寻找可用端口（长期解决方案） #

不想每次手动杀进程的话，可以让Webpack自动识别并使用空闲端口，不用硬编码固定值：

• 先安装portfinder依赖：

  npm install portfinder --save-dev
  

• 修改你的webpack.config.js，把固定端口改成动态获取逻辑：

  const portfinder = require('portfinder');
  
  // 基础devServer配置
  const devServerConfig = {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    port: 1123 // 保留默认端口，portfinder会从这个值开始查找空闲端口
  };
  
  // 用Promise包装配置，实现动态端口获取
  module.exports = new Promise((resolve, reject) => {
    portfinder.basePort = devServerConfig.port;
    portfinder.getPort((err, port) => {
      if (err) {
        reject(err);
      } else {
        devServerConfig.port = port;
        // 导出最终的webpack配置
        resolve({
          // 你的其他webpack配置项...
          devServer: devServerConfig
        });
      }
    });
  });
  

  这样每次启动项目时，Webpack会自动从1123端口开始，找到第一个未被占用的端口使用，彻底避免端口占用问题。

3. 优化Git Bash中的进程终止方式 #

有时候Ctrl+C在Git Bash里没法彻底终止Webpack的所有子进程，你可以试试这些小技巧：

• 如果键盘有Ctrl+Break键，用它替代Ctrl+C，终止进程的更彻底；
• 终止后执行jobs命令，查看是否有残留的后台进程，用kill %1（%后面是对应job编号）杀掉残留进程。

问题根源 #

本质是Windows和类Unix系统的信号处理逻辑不同，Git Bash模拟的Unix环境里，Ctrl+C发送的SIGINT信号，有时候无法让Webpack的文件监听等子进程彻底退出，导致端口一直被占用。

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