大招公开！零基础小白也能轻松搞定Vite中的Mock服务器

2023-01-19 08:31:51

如何在 Vite 中自制 Mock 服务器：打造高效前后端开发体验

作为一名合格的程序员，我们经常面临前后端开发不同步的问题，这无疑会拖慢整个项目的开发进度。为了解决这个难题，Mock 服务器 应运而生，它能够模拟接口数据，让我们能够在前端进行开发和测试，而无需等待后端完成开发。

那么，如何如何在 Vite 中自制 Mock 服务器呢？我们将在本文中深入探讨这个话题。

安装依赖包

首先，我们需要安装几个依赖包：

npm install -D vite-plugin-mock-server

配置 Mock 服务器

在 Vite 的配置文件 vite.config.js 中，添加如下配置：

module.exports = {
  plugins: [
    {
      name: 'vite-plugin-mock-server',
      options: {
        // 监听的端口号，默认 1337
        port: 1337,
        // 模拟的数据文件路径，默认 'mock'
        dataPath: 'mock'
      }
    }
  ]
}

编写 Mock 数据文件

接下来，我们需要编写 Mock 数据文件，这里以一个简单的用户列表为例：

[
  {
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com'
  },
  {
    id: 2,
    name: 'Jane Smith',
    email: 'jane.smith@example.com'
  }
]

启动 Mock 服务器

在终端中运行以下命令启动 Mock 服务器：

npm run serve

使用 Mock 服务器

现在，我们就可以在前端代码中使用 Mock 服务器了。例如，以下代码可以获取用户列表：

const axios = require('axios')

const getUsers = async () => {
  const response = await axios.get('http://localhost:1337/api/users')
  return response.data
}

SWR 与封装请求

为了让你的开发过程更加高效和便捷，你可以使用 SWR （stale-while-revalidate）库来管理请求状态，并封装一个请求函数来简化代码。

import useSWR from 'swr'

const getUsers = async () => {
  const response = await axios.get('http://localhost:1337/api/users')
  return response.data
}

const useUsers = () => {
  const { data, error } = useSWR('users', getUsers)
  return { users: data, isLoading: !error && !data, error }
}