在 Vue3 开发中模拟数据

在 Vue3 开发中，模拟数据是常见的需求（尤其在前后端分离开发时）。以下是几种常用方法及具体实现：

---

一、本地静态数据

直接在组件或独立文件中定义静态数据，适用于简单场景。

<script setup>
import { ref } from 'vue';

const mockUsers = ref([
  { id: 1, name: 'Alice', age: 28 },
  { id: 2, name: 'Bob', age: 32 }
]);
</script>

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

---

二、使用 JSON 文件

1. 创建 src/mock/data.json：

{
  "users": [
    { "id": 1, "name": "Charlie", "role": "admin" },
    { "id": 2, "name": "Diana", "role": "user" }
  ]
}

2. 在组件中引入：

<script setup>
import mockData from '@/mock/data.json';

console.log(mockData.users); // 输出模拟数据
</script>

---

三、使用 Mock.js（动态生成数据）

1. 安装 Mock.js：

npm install mockjs --save-dev

2. 创建 src/mock/user.js：

import Mock from 'mockjs';

Mock.mock('/api/users', 'get', {
  'list|5-10': [{
    'id|+1': 1,
    'name': '@cname',
    'email': '@email',
    'avatar': Mock.Random.image('100x100')
  }]
});

3. 在入口文件启用 Mock：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

if (import.meta.env.DEV) {
  import('./mock/user'); // 仅在开发环境启用
}

createApp(App).mount('#app');

---

四、Vite 插件（vite-plugin-mock）

1. 安装插件：

npm install vite-plugin-mock cross-env -D

2. 配置 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: 'src/mock', // Mock 文件存放目录
      localEnabled: true,  // 开发环境启用
      prodEnabled: false,  // 生产环境禁用
    })
  ]
});

3. 创建 src/mock/user.ts：

import { MockMethod } from 'vite-plugin-mock';

export default [
  {
    url: '/api/login',
    method: 'post',
    response: ({ body }) => {
      if (body.username === 'admin') {
        return {
          code: 200,
          data: { token: 'mock_token' }
        };
      }
      return { code: 401, message: 'Invalid credentials' };
    }
  }
] as MockMethod[];

---

五、Axios 拦截器（临时模拟请求）

// src/utils/request.js
import axios from 'axios';

const instance = axios.create();

// 开发环境拦截请求
if (import.meta.env.DEV) {
  instance.interceptors.request.use(config => {
    if (config.url === '/api/posts') {
      return Promise.resolve({
        data: [
          { id: 1, title: 'Mock Post 1' },
          { id: 2, title: 'Mock Post 2' }
        ]
      });
    }
    return config;
  });
}

export default instance;

---

六、进阶方案：Express 本地服务器

1. 创建 mock-server.js：

const express = require('express');
const app = express();

app.get('/api/products', (req, res) => {
  res.json([
    { id: 1, name: 'Product A', price: 99.99 },
    { id: 2, name: 'Product B', price: 149.99 }
  ]);
});

app.listen(3001, () => {
  console.log('Mock server running on http://localhost:3001');
});

2. 启动服务器：

node mock-server.js

3. 在 Vue 组件中调用：

axios.get('http://localhost:3001/api/products')
  .then(response => console.log(response.data));

---

选择建议：

• 快速原型：使用组件内静态数据或 JSON 文件
• 动态数据需求：Mock.js + 随机数据生成
• 完整 API 模拟：vite-plugin-mock 或 Express 服务器
• 请求拦截调试：Axios 拦截器临时方案

注意：生产环境务必移除 Mock 逻辑，可通过环境变量判断：

if (import.meta.env.MODE === 'development') {
  // 启用 Mock
}