在 Vue 3 项目中使用 Mock 数据

方案：vite-plugin-mock（Vite 项目首选）

这是目前最推荐的方式，因为它能直接启动 Mock 服务器，无需启动后端，且支持热更新。

1. 安装依赖

bash 复制代码

npm install vite-plugin-mock mockjs -D

2. 配置 vite.config.ts

bash 复制代码

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 文件的目录
      enable: true,              // 是否开启 mock（生产环境建议 false）
    }),
  ],
})

第 3 步：创建 Mock 文件

在项目根目录下创建 mock 文件夹，然后在里面创建你的第一个 mock 文件。

创建 mock/user.js

bash 复制代码

// mock/user.js

export default [
  {
    url: '/api/login',          // 拦截的接口地址
    method: 'post',             // 请求方法：get/post/put/delete
    response: ({ body }) => {
      // body 是前端传来的请求参数
      const { username, password } = JSON.parse(body)
      
      // 可以在这里做简单的逻辑判断
      if (username === 'admin' && password === '123456') {
        return {
          code: 200,
          message: '登录成功',
          data: {
            token: 'mock-token-' + Date.now(),
            userName: '管理员',
            roles: ['admin']
          }
        }
      } else {
        return {
          code: 401,
          message: '用户名或密码错误',
          data: null
        }
      }
    }
  },
  {
    url: '/api/user/list',
    method: 'get',
    response: ({ query }) => {
      // query 是 GET 请求的参数
      console.log('查询参数：', query)
      
      return {
        code: 200,
        message: 'success',
        data: {
          total: 2,
          list: [
            { id: 1, name: '张三', age: 25, email: 'zhangsan@test.com' },
            { id: 2, name: '李四', age: 30, email: 'lisi@test.com' }
          ]
        }
      }
    }
  }
]

第 4 步：在 Vue 组件中使用

bash 复制代码

<template>
  <div>
    <h1>Vue3 + Mock 测试</h1>
    <button @click="handleLogin">登录</button>
    <button @click="handleGetList">获取用户列表</button>
    <div v-if="userInfo">
      <p>用户名：{{ userInfo.userName }}</p>
      <p>Token：{{ userInfo.token }}</p>
    </div>
    <div v-if="userList.length">
      <h3>用户列表：</h3>
      <ul>
        <li v-for="item in userList" :key="item.id">
          {{ item.name }} - {{ item.age }}岁 - {{ item.email }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
  name: 'App',
  setup() {
    const userInfo = ref(null)
    const userList = ref([])

    // 登录请求
    const handleLogin = async () => {
      try {
        const res = await axios.post('/api/login', {
          username: 'admin',
          password: '123456'
        })
        console.log('登录响应：', res.data)
        if (res.data.code === 200) {
          userInfo.value = res.data.data
          alert('登录成功！')
        } else {
          alert(res.data.message)
        }
      } catch (error) {
        console.error('请求失败：', error)
      }
    }

    // 获取用户列表
    const handleGetList = async () => {
      try {
        const res = await axios.get('/api/user/list', {
          params: {
            page: 1,
            pageSize: 10
          }
        })
        console.log('列表响应：', res.data)
        if (res.data.code === 200) {
          userList.value = res.data.data.list
        }
      } catch (error) {
        console.error('请求失败：', error)
      }
    }

    return {
      userInfo,
      userList,
      handleLogin,
      handleGetList
    }
  }
}
</script>

请求返回 404

原因：mock 文件路径或接口地址不匹配，留意Mock文件夹创建位置，和地址正常，或是本地有设置代理，需要修改开发环境的基本路径