如何在Nuxt 3中同时配置MSW的客户端与服务端？

1. 安装依赖 #

首先安装MSW开发依赖：

npm install msw --save-dev
# 或
yarn add msw -D

2. 创建Mock接口处理器 #

在server/mocks/handlers.ts中定义需要Mock的接口逻辑：

import { rest } from 'msw'

export const handlers = [
  // 示例：Mock /api/user 接口
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        id: 1,
        name: 'Mocked Server User'
      })
    )
  }),
  // 可添加更多Mock接口规则
]

3. 初始化MSW服务端实例 #

在server/mocks/server.ts中创建并导出MSW服务端实例：

import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

4. 配置Nuxt 3服务端插件 #

创建server/plugins/msw.ts，让Nuxt在服务端启动时自动加载MSW：

import { server } from '../mocks/server'

export default defineNitroPlugin(() => {
  // 仅在开发环境启用Mock服务
  if (process.env.NODE_ENV === 'development') {
    // 启动MSW，未匹配的请求直接转发到真实后端
    server.listen({
      onUnhandledRequest: 'bypass'
    })

    // 服务端关闭时停止MSW，避免内存泄漏
    addAppHook('app:close', () => {
      server.close()
    })
  }
})

关键注意事项 #

• 环境隔离：严格限制MSW仅在开发环境启用，防止生产环境拦截真实请求
• 未处理请求：设置onUnhandledRequest: 'bypass'，确保未配置Mock的请求正常流转
• 资源清理：通过app:close钩子停止MSW服务，避免服务重启时的内存泄漏
• SSR适配：如果服务端渲染阶段需要Mock数据，确保MSW在页面组件发起请求前完成启动

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