前端开发必备技能：Vite中的Mock 接口模拟实战演示（前后端联调）在现代前端开发中，等待后端接口常常拖慢进度。在V

在前后端分离开发中，前端常常需要在后端接口尚未完成时就开始开发页面。为了不影响开发进度和测试流程，Mock 数据成为前端开发中非常关键的一环。

一、什么是 Mock 数据？

Mock 数据（又称“模拟数据”）是指在开发过程中，前端通过模拟后端接口返回的数据，用于替代尚未完成的真实接口数据。它能帮助我们在没有后端支持的情况下，提前完成前端页面的开发与测试。

✅ 使用 Mock 的优势

提高开发效率：不依赖后端接口即可开发前端页面。
减少等待时间：避免因接口未完成而延误项目进度。
提前测试逻辑：可模拟各种接口返回情况，测试异常处理。
接口文档先行：Mock 的过程有助于推动接口文档的规范化。

二、Vite 中使用 `vite-plugin-mock` 实现接口模拟

Vite 是一个现代化的前端构建工具，支持快速启动和热更新。结合 vite-plugin-mock 插件，可以非常方便地在本地模拟后端接口。

安装插件

pnpm add -D vite-plugin-mock

配置插件（vite.config.js）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: './mock', // 指定 mock 文件夹路径
      localEnabled: true, // 开发环境启用 mock
      prodEnabled: false, // 生产环境禁用 mock
    }),
  ],
})

创建 Mock 文件（./mock/test.js）

export default [
    {
        url: '/api/todos',
        method: 'get',
        response: () => {
            const todos = [
                {
                    id: 1,
                    title: 'todo1',
                    completed: false,
                },
                {
                    id: 2,
                    title: 'todo2',
                    completed: true,
                }
            ]
            return {
                code: 0, // 没有错误
                message: 'success',
                data: todos,
            }
        }
    },
    {
        url: '/repos',
        method: 'get',
        response: () => {
            const repos = [
                {
                    id: 695370163,
                    title: 'ai_lesson',
                    description: "AI全栈工程师课程",
                },
                {
                    id: 152578450,
                    title: 'AlloyFinger',
                    description: "super tiny size multi-touch gestures library for the web.You can touch this",
                }
            ]
            return {
                code: 0, // 没有错误
                message: 'success',
                data: repos,
            }
            return repos
        }
    },
]

📝 说明：

url：接口路径

method：请求方法（get/post/delete 等）

response：返回数据的函数，支持参数 req, res

三、封装 Axios 请求，调用 Mock 接口

1. 创建 Axios 实例（./src/api/config.js）

// 标准的http请求
import axios from 'axios';
// mock 地址
axios.defaults.baseURL = 'http://localhost:5173';
// 线上地址有了
// axios.defaults.baseURL ="https://api.github.com/users/saltedfish6"
export default axios;

2. 封装接口调用（./src/api/index.js）

import axios from './config.js';

// 获取 todos 数据
export const getTodos = () => {
  return axios.get('/api/todos');
};

// 获取 repos 数据
export const getRepos = () => {
  return axios.get('/repos');
};

3. 在组件中使用

import { 
  useState, 
  useEffect
} from 'react'

import './App.css'
import {
  getTodos,
} from '@/api'
import{
  getRepos
} from '@/api'

function App() {
  const [todos, setTodos] = useState([])
  const [repos, setRepos] = useState([])
  useEffect(() => {
    const fetchData = async () => {
      const todosResult = await getTodos()
      console.log(todosResult.data)
      setTodos(todosResult.data.data)
      const reposResult = await getRepos()
      console.log(reposResult.data)
      setRepos(reposResult.data.data)
    }
    fetchData()
  }, [])

  return (
    <>
       {
        todos.map( todo=>(
          <div key={todo.id}>
            {todo.title}
          </div>
        ))
       },
       {
        repos.map( repo=>(
          <div key={repo.id}>
            {repo.title}
            {repo.description}
          </div>
        ))
       }
    </>
  )
}

export default App

效果展示

四、Mock 数据与真实接口的切换

在开发阶段使用 Mock 数据，而在联调阶段切换为真实接口是前端开发的常见流程。

🔄 修改 Axios 配置切换接口

// 标准的http请求
import axios from 'axios';
// 开发环境使用Mock
// axios.defaults.baseURL = 'http://localhost:5173'; 
// 上线使用真实地址
axios.defaults.baseURL ="https://api.github.com/users/saltedfish6"
export default axios;

// 组件中注释掉这两个地方，修改一个地方

    1. // const todosResult = await getTodos()
      // console.log(todosResult.data)
      // setTodos(todosResult.data.data)
      
    2.       {/* {
        todos.map( todo=>(
          <div key={todo.id}>
            {todo.title}
          </div>
        ))
       }, */}
  3.   const reposResult = await getRepos()
      console.log(reposResult.data)
      setRepos(reposResult.data.data)
    } // reposResult.data.data变成reposResult.data
      const reposResult = await getRepos()
      console.log(reposResult.data)
      setRepos(reposResult.data)
    }

效果展示

✅ 实践建议：

使用 .env.local 文件配置不同环境地址。

使用 vite-plugin-mock 控制 Mock 的启用状态。

Mock 数据格式应与真实接口保持一致，便于后期替换。

五、前后端联调流程

1. 接口文档先行

在开发前，前后端应共同制定接口文档，包括：

接口路径	方法	请求参数	返回示例
`/api/todos`	GET	无	`[{"id":1,"title":"todo1","completed":false}]`

2. 前端开发阶段

使用 Mock 数据模拟接口。
根据接口文档封装 API 请求。
完成页面结构与交互逻辑。

3. 后端接口完成后

替换 Axios 的 baseURL 为真实接口地址。
调试接口数据格式是否与 Mock 一致。
修复可能的数据结构差异。

4. 联合测试

前后端共同测试接口调用。
检查异常处理逻辑。
优化接口性能与兼容性。

在现代前端开发中，Mock 数据是提升开发效率、降低依赖成本的重要工具。借助 vite-plugin-mock，我们可以非常便捷地在 Vite 项目中模拟接口，实现前后端并行开发。

前端开发必备技能：Vite中的Mock 接口模拟实战演示（前后端联调）