在前端开发中，使用模拟数据能够提高开发效率，尤其是在后端接口尚未完成时。本文将详细介绍在 Vite + Vue3 项目中如何使用 Mock 模拟数据。

确保项目已搭建完成。如果没有，可以使用 Vite 官方提供的模板快速创建一个 Vue3 项目。

安装 Mock 工具，常用的是 mockjs。在项目根目录下打开终端，执行命令 npm install mockjs --save-dev，将其作为开发依赖安装。

接下来，在项目中创建 Mock 数据文件。例如，在 src 目录下新建一个 mock 文件夹，在其中创建一个 user.js 文件来模拟用户相关的数据。

import Mock from 'mockjs'

const data = Mock.mock({
  'list|10': [
    {
      id: '@id',
      name: '@name',
      age: '@integer(18, 60)',
      email: '@email'
    }
  ]
})

export default data.list

上述代码使用 Mock.mock 方法创建了一个包含 10 条模拟用户数据的列表，每条数据包含 id、name、age 和 email 字段。

然后，在 Vue 组件中使用这些模拟数据。以一个简单的列表展示组件为例：

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ user.age }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import userList from '../mock/user.js'
</script>

在这个组件中，通过导入 user.js 文件获取模拟数据，并使用 v-for 指令将数据渲染到页面上。

如果项目使用了 Vue Router，也可以在路由守卫中使用 Mock 数据，实现数据预加载。

还可以结合 Vite 的代理服务器功能，将请求转发到 Mock 数据接口。在 vite.config.js 文件中配置代理：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

通过上述步骤，在 Vite + Vue3 项目中就能够轻松使用 Mock 模拟数据，方便开发过程中的调试与页面搭建，提升整体开发效率。