Vite 如何配置实现类似 webpack-dev-server 的开发中间件功能

Vite 中对应 Webpack devServer.before 自定义中间件的能力由 server.configureServer 配置项提供，底层基于 connect 中间件体系，和 express 写法高度兼容，原有 Webpack 逻辑几乎可以直接迁移。

基础实现示例 #

以下是和你给出的 Webpack 配置功能完全对齐的 Vite 写法：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    configureServer(server) {
      server.middlewares.use('/', (req, res, next) => {
        // 匹配GET请求根路径的逻辑
        if (req.method === 'GET' && req.url === '/') {
          // 自定义逻辑写在这里
          res.writeHead(302, { Location: 'someUrl' })
          res.end()
          return
        }
        next()
      })
    }
  }
})

调整中间件执行时机 #

默认配置下自定义中间件会在 Vite 内置中间件之后执行，如果你需要和 Webpack before 完全一致的执行时机（自定义中间件早于内置中间件执行），可以让 configureServer 返回一个函数，函数内挂载的中间件会优先运行：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    configureServer(server) {
      // 返回的函数会在Vite内置中间件安装前执行
      return () => {
        server.middlewares.use('/test', (req, res, next) => {
          if (req.method === 'GET') {
            // 示例：mock接口返回数据
            res.setHeader('Content-Type', 'application/json')
            res.end(JSON.stringify({ code: 0, data: 'mock响应' }))
            return
          }
          next()
        })
      }
    }
  }
})

支持的常见场景 #

• 开发阶段接口 mock 模拟返回
• 路径跳转、重定向、路径重写
• 自定义请求日志、临时权限校验等测试逻辑
• 静态资源自定义响应规则

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