1-3 使用Mock.js拦截前端请求
Mock.mock() 拦截功能
Mock.js 除了生成假数据，还能拦截前端的 AJAX 请求并返回 Mock 数据，在 Network 面板中不会看到真实的 HTTP 请求。
基本用法
import Mock from 'mockjs'
// 拦截 GET /api/home
Mock.mock(/\/api\/home/, 'get', {
code: 200,
data: {
title: '@ctitle',
list: [{ id: 1, name: '@cname' }]
}
})
javascript
Mock.mock() 接受三个参数：
- URL：字符串或正则表达式
- 请求类型：
get、post、put、delete - 响应数据：JSON 对象或函数
在 Vite + Vue 项目中集成
1. 安装依赖
pnpm install mockjs axios
pnpm install -D @types/mockjs
bash
2. 创建 Mock 入口
src/mock/
├── index.ts ← 入口文件（自动加载模块）
└── modules/
└── home.ts ← 具体 Mock 配置
text
3. 定义 Mock 模块
// src/mock/modules/home.ts
export default {
url: '/api/home',
type: 'get',
data: {
code: 200,
data: {
title: '@ctitle(5,15)',
list: [{ id: 1, name: '@cname' }]
}
}
}
typescript
4. 编写入口文件（支持白名单）
// src/mock/index.ts
import Mock from 'mockjs'
interface MockData {
url: string | RegExp
type: string
data: any
}
// 白名单：这些接口不经过 Mock 拦截，直接请求服务端
const whitelist: Partial<MockData>[] = [
// { url: '/api/home', type: 'get' }
]
const modules = Object.values(
import.meta.glob('./modules/*.ts', { eager: true })
)
const setupMock = (handle: MockData | MockData[]) => {
if (Array.isArray(handle)) {
handle.forEach(setupMock)
return
}
const { url, type, data } = handle
// 白名单检查
if (
typeof url === 'string' &&
whitelist.some(item => item.url === url && item.type === type)
) {
return
}
Mock.mock(url, type, data)
}
modules.forEach((mod: any) => {
setupMock(mod.default)
})
typescript
5. 在 main.ts 中引入（仅开发环境）
// src/main.ts
if (import.meta.env.DEV) {
import('./mock').then(() => {
// Mock 加载完成后再创建应用
})
}
// 创建 Vue 应用...
typescript
注意：import() 是异步方法，需要用 .then() 确保 Mock 加载完成后再发起请求。
6. TypeScript 配置
在 tsconfig.json 中允许引入 JS 文件：
{
"compilerOptions": {
"allowJs": true
}
}
json
生产环境验证
使用 pnpm build 构建后，检查 dist/assets/index.js 中是否包含 Mock.js 相关代码。由于有 import.meta.env.DEV 判断，生产环境中 Mock 代码不会被加载。
白名单机制
白名单中的接口不会被 Mock 拦截，而是发送真实的 HTTP 请求到服务端。配合 Vite 的 server.proxy 配置，可以实现：
- 部分 API 走 Mock 数据
- 部分 API 走真实服务端
// vite.config.ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
})
typescript
参考资源
- Mock.js Mock 功能 - 拦截 API 文档
- Vite Server Proxy - 代理配置
↑