vite mock数据 viteMockServe

viteMockServe 是一个基于 Vite 的 mock 数据服务工具，可以帮助我们快速地搭建本地的 mock 数据服务。它提供了类似于 express 的路由和处理函数，可以根据请求的 URL 返回相应的模拟数据。使用 viteMockServe，我们可以在开发过程中方便地模拟接口数据，避免与后端接口耦合，提高开发效率。

使用 viteMockServe 需要先安装依赖：

npm install vite-plugin-mock --save-dev

然后在 Vite 的配置文件中引入 vite-plugin-mock 插件，配置 mock 数据：

// vite.config.js
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue'
import viteMockServe from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    createVuePlugin(),
    viteMockServe({
      mockPath: 'mock',
      localEnabled: true,
      prodEnabled: false
    })
  ]
})

以上代码中，我们将 mock 数据放在项目根目录下的 mock 文件夹中，设置了本地开发环境启用 mock 数据服务，生产环境禁用。

在 mock 文件夹下创建一个 js 文件，定义 mock 数据：

// mock/demo.js
export default [
  {
    url: '/api/demo',
    method: 'get',
    response: () => {
      return {
        code: 200,
        data: {
          message: 'Hello, World!'
        }
      }
    }
  }
]

以上代码定义了一个 GET 请求 `/api/demo`，返回数据为 `{ code: 200, data: { message: 'Hello, World!' } }`。

启动 Vite 服务后，即可访问 mock 数据服务：

http://localhost:3000/api/demo