如何借助vite build --watch构建库后自动重启vite dev服务器？

当然可以实现，下面是几种实用的方案：

方案1：使用nodemon + concurrently 快速实现 #

这是最简单的组合方式，借助nodemon监听构建产物目录变化，触发dev服务器重启，concurrently保证两个命令并行运行。

• 先安装依赖：

  npm install -D nodemon concurrently
  

• 修改package.json的脚本配置：

  {
    "scripts": {
      "build:watch": "vite build --watch",
      "dev:restart": "nodemon --watch ./dist --exec 'vite dev'",
      "start": "concurrently \"npm run build:watch\" \"npm run dev:restart\""
    }
  }
  

  执行npm run start后，vite build --watch会持续监听库源码变化并构建，nodemon则盯着dist目录（替换成你的实际产物目录），一旦产物更新就自动重启vite dev。

方案2：修改Vite配置实现监听（轻量但仅刷新页面） #

如果不需要完全重启服务器，只是让dev服务器感知产物变化并刷新页面，可以直接在Vite配置中添加监听规则：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    watch: {
      // 监听你的产物目录，比如dist下所有文件
      include: ['dist/**/*'],
      // 可选：排除sourcemap这类不需要触发更新的文件
      exclude: ['dist/*.map']
    },
    // 调整HMR超时，避免频繁触发
    hmr: {
      timeout: 1000
    }
  }
})

这种方式依赖Vite的HMR机制，会触发页面刷新而非服务器重启，适合不需要重置服务器状态的场景。

方案3：自定义脚本监听（高度可控） #

如果需要更灵活的控制逻辑，可以用chokidar手动编写监听脚本：

• 安装依赖：

  npm install -D chokidar cross-spawn
  

• 创建restart-dev.js脚本：

  const chokidar = require('chokidar')
  const spawn = require('cross-spawn')
  
  let devProcess = null
  
  // 启动/重启dev服务器
  function restartDev() {
    if (devProcess) {
      devProcess.kill('SIGTERM')
    }
    devProcess = spawn('vite', ['dev'], { stdio: 'inherit' })
  }
  
  // 监听产物目录变化
  chokidar.watch('./dist/**/*', { ignoreInitial: true })
    .on('add', restartDev)
    .on('change', restartDev)
    .on('unlink', restartDev)
  
  // 初始启动服务器
  restartDev()
  

• 在package.json中添加脚本：

  {
    "scripts": {
      "build:watch": "vite build --watch",
      "dev:auto": "node restart-dev.js",
      "start": "concurrently \"npm run build:watch\" \"npm run dev:auto\""
    }
  }
  

  这种方式可以自定义触发重启的条件，比如只监听特定后缀的文件，或者添加延迟避免频繁重启。

内容的提问来源于stack exchange，提问作者Baek In Sun