Frontend · JavaScript

Mock Data and a One-Line baseURL Switch Let Frontend Development Run Without a Backend

By 默_笙 · Aug 21, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Waiting for backend endpoints is one of the most common frontend blockers in full-stack projects. This pattern costs almost nothing to adopt — an `api/` directory, an axios instance, and a Vite mock plugin — and eliminates that dependency entirely, letting frontend and backend teams ship in parallel.

Summary

Frontend-backend separation is often treated as a code-organization concern, but the real bottleneck is the development timeline: frontend teams stall waiting for backend endpoints. A lightweight interface-engineering layer solves this by centralizing all API calls in an `api/` directory, configuring an axios instance with a swappable `baseURL`, and intercepting requests with MockJS through Vite during development. The frontend defines its own contract, mocks the data, and builds the full application independently. When the real backend is ready, commenting out one `baseURL` line switches every request to the live server with zero code changes elsewhere. The pattern ties together React components, react-router lazy loading, zustand state management, and the mock layer into a single workflow that decouples frontend and backend delivery schedules.

Takeaways

— An `api/` directory with one module per backend resource (e.g., `todos.js`, `user.js`) acts as the single entry point for all frontend HTTP calls.

— An axios instance configured with `baseURL: '/api'` during development and a commented-out production URL makes switching environments a one-line change.

— MockJS combined with Vite’s mock plugin intercepts requests to `/api/*` and returns fake data, so pages render and function without any backend.

— React components call API functions from the `api/` directory inside `useEffect` with an IIFE, keeping data-fetching logic out of the component tree.

— Lazy-loaded routes (`React.lazy` + `Suspense`) and zustand for state complete the frontend’s independent runtime, with the `/api` layer as the only coupling point to the backend.

Conclusions

The pattern is less about tooling and more about treating the API contract as a frontend-owned artifact: the frontend defines the shape and cadence of data it needs, and the backend conforms later.

MockJS plus Vite interception is a notably simpler alternative to running a separate mock server or using service workers for local development, and it integrates directly into the existing dev-server pipeline.

The one-line `baseURL` switch is effective because it exploits axios’s instance pattern — every API module imports the same configured instance, so a single config change propagates everywhere without touching individual request functions.

Concepts & terms

Frontend Interface Engineering

A practice where the frontend owns the API contract by centralizing all HTTP calls in an `api/` directory, using mock data during development, and switching to real endpoints via a single `baseURL` configuration change.

MockJS + Vite Mock Plugin

A setup where MockJS defines fake API responses and a Vite plugin intercepts matching HTTP requests during development, returning mock data without a running backend server.

Axios Instance with baseURL

An axios instance pre-configured with a `baseURL` prefix so that all requests share a common root path; swapping the `baseURL` value switches every API call between mock and production environments in one place.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗