vite-plugin-mock-dev-server

import { defineConfig } from 'vite'; import mockDevServerPlugin from 'vite-plugin-mock-dev-server'; export default defineConfig({ plugins: [ mockDevServerPlugin({ // Optional: Specify mock files directory, relative to cwd. // dir: 'mocks', // Optional: Enable/disable the plugin entirely. enabled: process.env.NODE_ENV === 'development' }), ], // 'define' fields are accessible within mock files. define: { __APP_VERSION__: JSON.stringify('1.0.0'), }, server: { proxy: { // The plugin reads `server.proxy` to determine which URLs to mock. // Requests matching '/api' will be handled by the mock server if enabled. '^/api': { target: 'http://localhost:3000', // Actual backend or a placeholder changeOrigin: true, }, }, }, }); // mock/users.mock.ts import { defineMock } from 'vite-plugin-mock-dev-server'; export default defineMock([ { url: '/api/users', method: 'GET', body: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ], delay: 500, // Simulate network latency }, { url: '/api/users/:id', method: 'GET', body: ({ params }) => ({ id: Number(params.id), name: `User ${params.id}` }), // Persist mock data on HMR to avoid data loss during development persistOnHMR: true }, { url: '/api/error', method: 'GET', status: 500, body: { message: 'Internal Server Error' }, } ]);