自定义中间件集成

项目配置与基础使用

Vite.js 的配置文件 vite.config.js 位于项目根目录，通过导出一个对象来定义构建行为。基础配置示例：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    assetsDir: 'static'
  }
})

常用配置项说明：

• plugins: 配置需要使用的插件数组
• server: 开发服务器选项
• build: 生产构建选项
• resolve: 路径解析配置
• css: CSS 相关配置

环境变量通过 .env 文件管理，支持模式区分：

# .env.development
VITE_API_BASE=http://localhost:3000/api

# .env.production
VITE_API_BASE=https://api.example.com

自定义中间件集成

Vite 的 devServer 基于 Connect 中间件架构，可通过 configureServer 钩子扩展：

// vite.config.js
export default defineConfig({
  plugins: [{
    name: 'custom-middleware',
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url === '/custom') {
          res.end('Hello from custom middleware!')
        } else {
          next()
        }
      })
    }
  }]
})

常用中间件场景

1. API 代理中间件：

import proxy from 'http-proxy-middleware'

configureServer(server) {
  server.middlewares.use(
    '/api',
    proxy({
      target: 'http://localhost:4000',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    })
  )
}

2. 请求日志中间件：

configureServer(server) {
  server.middlewares.use((req, res, next) => {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    next()
  })
}

3. Mock 数据中间件：

configureServer(server) {
  server.middlewares.use('/mock', (req, res) => {
    const data = {
      '/users': [{ id: 1, name: 'Alice' }],
      '/products': [{ id: 101, title: 'Vite Guide' }]
    }
    res.setHeader('Content-Type', 'application/json')
    res.end(JSON.stringify(data[req.path]))
  })
}

高级中间件模式

条件中间件加载

configureServer(server) {
  if (process.env.NODE_ENV === 'development') {
    server.middlewares.use(require('vite-plugin-mock').createMockMiddleware())
  }
}

中间件执行顺序控制

configureServer(server) {
  // 最先执行的中间件
  server.middlewares.use((req, res, next) => {
    req.startTime = Date.now()
    next()
  })

  // 最后执行的中间件
  return () => {
    server.middlewares.use((req, res, next) => {
      console.log(`Request took ${Date.now() - req.startTime}ms`)
      next()
    })
  }
}

WebSocket 中间件集成

configureServer(server) {
  const wss = new WebSocket.Server({ noServer: true })
  
  server.httpServer?.on('upgrade', (req, socket, head) => {
    if (req.url === '/ws') {
      wss.handleUpgrade(req, socket, head, (ws) => {
        wss.emit('connection', ws, req)
      })
    }
  })

  wss.on('connection', (ws) => {
    ws.send('Connected to Vite WS server')
  })
}

插件与中间件协同

创建自定义插件整合中间件逻辑：

// vite-plugin-custom.js
export default function customPlugin(options) {
  return {
    name: 'vite-plugin-custom',
    configureServer(server) {
      const middleware = createCustomMiddleware(options)
      server.middlewares.use(middleware)
    }
  }
}

function createCustomMiddleware(options) {
  return (req, res, next) => {
    // 自定义逻辑
    if (req.headers['x-custom-header']) {
      res.setHeader('x-custom-response', 'processed')
    }
    next()
  }
}

性能优化中间件

实现缓存控制和性能监控：

configureServer(server) {
  server.middlewares.use('/assets', (req, res, next) => {
    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
    next()
  })

  server.middlewares.use((req, res, next) => {
    const timer = setTimeout(() => {
      console.warn(`Slow request: ${req.url}`)
    }, 2000)
    
    const originalEnd = res.end
    res.end = function(...args) {
      clearTimeout(timer)
      originalEnd.apply(this, args)
    }
    
    next()
  })
}

安全相关中间件

增强开发环境安全性：

configureServer(server) {
  server.middlewares.use((req, res, next) => {
    // 设置安全头
    res.setHeader('X-XSS-Protection', '1; mode=block')
    res.setHeader('X-Content-Type-Options', 'nosniff')
    res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin')
    
    // 阻止敏感路径访问
    if (req.url.match(/\.(env|config|git)/i)) {
      res.statusCode = 403
      return res.end('Access denied')
    }
    
    next()
  })
}

调试与错误处理

中间件调试技巧：

configureServer(server) {
  server.middlewares.use((req, res, next) => {
    try {
      // 业务逻辑
      if (req.url.startsWith('/debug')) {
        console.log('Request headers:', req.headers)
      }
      next()
    } catch (err) {
      console.error('Middleware error:', err)
      res.statusCode = 500
      res.end('Internal Server Error')
    }
  })
}

添加错误边界中间件：

configureServer(server) {
  server.middlewares.use((err, req, res, next) => {
    if (err) {
      res.status(500).json({
        error: 'Middleware Error',
        message: err.message,
        stack: process.env.NODE_ENV === 'development' ? err.stack : undefined
      })
    } else {
      next()
    }
  })
}