JavaScript Vite 构建中怎么在开发服务中配置自定义中间件-js教程-PHP中文网

在 vite 开发服务中配置自定义中间件，核心是通过插件的 configureserver 钩子操作 server.middlewares，推荐以插件形式注册，支持前置或后置插入、mock 接口、健康检查等，需避免路径冲突且不可在 vite.config.js 顶层直接定义。

javascript vite 构建中怎么在开发服务中配置自定义中间件

在 Vite 开发服务中配置自定义中间件，核心是使用插件的 configureServer 钩子，它会在 dev server 启动时暴露 server 实例，允许你像 Express 一样挂载中间件。

通过插件使用 configureServer 添加中间件

这是最推荐、最标准的方式。Vite 插件支持 configureServer 钩子（仅在 apply: 'serve' 时生效），你可以直接操作 server.middlewares（基于 Connect 的中间件栈）：

中间件会插入到 Vite 默认中间件之前（若直接 use），或之后（若返回函数）
支持完整 HTTP 请求/响应处理，如 mock 接口、健康检查、代理前置逻辑等
必须导出为插件对象，不能直接在 vite.config.js 顶层写 configureServer

示例：添加一个 /health 健康检查端点

vite-plugin-health.js

import { type Plugin } from 'vite'

export function healthPlugin(): Plugin {
  return {
    name: 'vite-plugin-health',
    apply: 'serve', // 仅开发阶段生效
    configureServer(server) {
      server.middlewares.use('/health', (req, res) => {
        res.statusCode = 200
        res.setHeader('Content-Type', 'text/plain')
        res.end('ok')
      })
    }
  }
}

然后在 vite.config.js 中引入并注册：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

import { defineConfig } from 'vite'
import { healthPlugin } from './vite-plugin-health.js'

export default defineConfig({
  plugins: [healthPlugin()]
})

中间件执行顺序与注意事项

Vite 内部中间件顺序是固定的，自定义中间件插入位置会影响行为：

直接 server.middlewares.use(...) → 插入到 Vite 默认中间件之前，可拦截或短路请求（例如统一鉴权）
若想在 Vite 处理完静态资源或 HMR 后再介入，可返回一个函数：configureServer(server) { return () => { ... } } → 此时中间件加在 Vite 默认中间件之后
注意路径匹配：Vite 默认会处理 /@...、/src/... 等内部路径，自定义中间件需避免与之冲突
不建议在中间件里做耗时同步操作，可能阻塞热更新

其他可行但不推荐的方式

虽然 Vite 不提供类似 Webpack 的 devServer.before 配置项，但仍有替代路径：

用 server.httpServer 手动监听：适用于需要底层 HTTP 事件（如 WebSocket 升级），但绕过 Connect 栈，失去中间件复用能力
结合 server.ws.send 主动推送消息给客户端，用于自定义 HMR 行为，不属于传统“中间件”范畴
不使用插件，改用 createServer API：适合嵌入式场景（如 CLI 工具），但需自行管理生命周期，复杂度高