模拟接口数据创建本地Mock数据文件。借助第三方（Mock.js）或结合开发服务器（Vite/Webpack Dev Sever）实现的前端模拟接口方案。
典型的（Vite+Mock.js）为例子：
1.安装依赖
npm install mockjs -D
# 如果使用 vite-plugin-mock（推荐）
npm install vite-plugin-mock -D
2.创建mock/index.js或mock/yser.js等文件
// mock/user.js
import Mock from 'mockjs'
// 拦截 GET /api/user/list 请求
Mock.mock('/api/user/list', 'get', {
code: 200,
data: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
],
message: 'success' })
// 拦截 POST /api/user/add
Mock.mock('/api/user/add', 'post', (options) => {
console.log('收到请求体:', options.body)
return {
code: 200,
message: '添加成功'
}
})
3.在mian.js或入口文件中引入
// main.js
import './mock' // 引入 mock 入口文件
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
这种方式仅适用于开发环境，Mock.js会拦截XMLHttpRequest/fetch，不要在生产环境中引入。
4.推荐使用vite-plugin-mock
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 文件目录
localEnabled: true, // 开发环境开启
prodEnabled: false, // 生产环境关闭
})
]
})
