还在等后端接口？vite-plugin-mock 教你前端自造接口跑起来！

在实际开发中，前后端节奏常常对不齐。前端页面都写完了，接口还没影子，开发只能干等？其实完全没必要。

前端完全可以先"自造接口"，利用 Mock 技术模拟后端返回的数据，保证页面功能正常开发。本文就结合 Vite 项目，带你用 vite-plugin-mock + axios 快速搭建一个本地 mock 服务。

🚀 技术选型

这个 demo 使用的是：

Vite（前端构建工具）
React（当然你也可以用 Vue）
axios（HTTP 请求库）
vite-plugin-mock（Mock 插件）

❓什么是 Mock？为什么要用它？

Mock，简单来说就是"伪造接口返回数据"。

它的作用很直接：

后端还没写完，前端照样能调接口、写页面。
接口文档一出，前端就能根据接口格式先 mock 出来。
不用反复请求真实接口，测试各种异常/边界场景更方便。

总结：前端先跑起来，不等人。

🛠️ 开始动手搭 mock 接口

1. 安装插件

bash 复制代码

pnpm add vite-plugin-mock -D

2. 配置 vite.config.js

js 复制代码

import { viteMockServe } from 'vite-plugin-mock'

export default {
  plugins: [
    viteMockServe({
      mockPath: 'mock', // mock 文件夹位置
      localEnabled: true, // 开发环境启用
    })
  ]
}

3. 写一个 mock 接口

在根目录建个 mock 文件夹，比如 /mock/test.js：

js 复制代码

export default [
  {
    url: '/api/todos',
    method: 'get',
    response: () => {
      return {
        code: 0,
        message: 'success',
        data: [
          { id: 1, title: 'todo1', completed: false },
          { id: 2, title: 'todo2', completed: true }
        ]
      }
    }
  },
  {
    url: '/repos',
    method: 'get',
    response: () => {
      return [
        {
          id: 695370163,
          title: 'ai_lesson',
          description: "AI全栈工程师课程",
        },
        {
          id: 152578450,
          title: 'AlloyFinger',
          description: "超轻量手势库，用起来贼顺手",
        }
      ]
    }
  }
]

🔗 用 axios 调用这些接口

配置基础地址（根据项目 dev 服务器）

js 复制代码

// src/api/config.js
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:5174' // vite dev 端口

export default axios

接口函数封装

js 复制代码

// src/api/index.js
import axios from './config'

export const getTodos = () => axios.get('/api/todos')
export const getRepos = () => axios.get('/repos')

🧩 页面中使用 mock 数据

React 组件中调用接口数据：

jsx 复制代码

import { useEffect, useState } from 'react'
import { getTodos, getRepos } from '@/api'

function App() {
  const [todos, setTodos] = useState([])
  const [repos, setRepos] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const todosRes = await getTodos()
      setTodos(todosRes.data.data)

      const reposRes = await getRepos()
      setRepos(reposRes.data)
    }

    fetchData()
  }, [])

  return (
    <>
      <h2>✅ Todo 列表</h2>
      {todos.map(todo => (
        <div key={todo.id}>
          <p>{todo.title}</p>
        </div>
      ))}

      <h2>📦 仓库列表</h2>
      {repos.map(repo => (
        <div key={repo.id}>
          <p>{repo.title}</p>
          <p>{repo.description}</p>
        </div>
      ))}
    </>
  )
}

export default App

🧠 最佳实践：前后端联调建议流程

接口先约定：后端还没写也没关系，接口文档先写好（Postman、YAPI、Swagger 都可以）
前端先 mock：接口字段照文档造，开发页面
联调替换：后端接口上线后，把 mock 替换成真实接口
上线前删除 mock：确保只在开发阶段启用 mock

✅ 小结

vite-plugin-mock 用起来非常轻量，特别适合前端快速开发阶段。
不用再等后端接口，mock 数据跑起来照样开发。
联调阶段更清晰，前后端各自独立、互不阻塞。

Mock 并不是只在写 demo 时才用，它就是前端工作流中不可或缺的一环。如果你还在因为接口没出而卡开发进度，不妨试试 vite 的 mock 流程，真香！

如果你看完有收获，欢迎点赞、收藏、转发👇

有问题也欢迎留言，一起交流 mock 实战经验～