1. 安裝 Mock.js
npm install mockjs --save-dev
# 或使用 CDN
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
2. 創建 Mock 數據文件
在項目中新建 mock 目錄，創建 mock.js 文件：
// mock/mock.js
import Mock from 'mockjs';// 模擬用戶列表接口
Mock.mock('/api/user/list', 'get', {'code': 200,'message': 'success','data|10': [{'id|+1': 1,'name': '@cname', // 隨機中文名'age|18-60': 1,'email': '@email','avatar': '@image("100x100")'}]
});// 模擬登錄接口
Mock.mock('/api/login', 'post', function(options) {const { username, password } = JSON.parse(options.body);if (username === 'admin' && password === '123456') {return Mock.mock({code: 200,message: '登錄成功',token: '@guid' // 隨機生成 token});} else {return { code: 401, message: '賬號或密碼錯誤' };}
});
3. 在入口文件中引入 Mock
根據環境判斷是否啟用 Mock（開發環境啟用，生產環境關閉）：
// main.js（Vue/React 入口文件）
if (process.env.NODE_ENV === 'development') {require('./mock/mock.js');
}
4. 發送請求（無需修改業務代碼）
前端正常發送請求，Mock.js 會自動攔截匹配的請求并返回模擬數據：
// 使用 axios 發送請求（與真實接口調用方式一致）
axios.get('/api/user/list').then(response => {console.log(response.data);});axios.post('/api/login', { username: 'admin', password: '123456' }).then(response => {console.log(response.data.token);});
5. 高級用法
5.1 隨機數據生成
Mock.js 提供豐富的占位符生成隨機數據：
Mock.mock('/api/data', {'name': '@cname','date': '@date("yyyy-MM-dd")','color': '@color','text': '@paragraph(3)'
});
5.2 動態參數處理
根據請求參數返回不同數據：
Mock.mock(/\/api\/user\/detail/, 'get', (options) => {const userId = options.url.split('/').pop();return {id: userId,name: '@cname'};
});
5.3 延遲響應
模擬網絡延遲：
Mock.setup({timeout: '500-1000' // 隨機 0.5~1 秒延遲
});
6. 環境切換配置
通過 webpack 或 vite 配置動態開關 Mock：
Vue CLI 配置（vue.config.js）
module.exports = {devServer: {before: require('./mock/mock.js') // 僅在開發環境引入}
};
Vite 配置（vite.config.js）
export default defineConfig({plugins: [{name: 'mock',configureServer(server) {if (process.env.NODE_ENV === 'development') {require('./mock/mock.js');}}}]
});
7. 注意事項
- 接口一致性：確保 Mock 數據的字段名和類型與后端接口文檔一致。
- 邊緣場景覆蓋：模擬空數據、異常狀態碼（如 404/500）等場景。
- 及時同步：后端接口完成后，逐步替換 Mock 數據為真實接口。
- 文檔記錄：使用 Swagger 或 YApi 等工具同步接口定義，方便聯調。
總結
通過 Mock.js，前端開發者可以：
- 獨立開發，不依賴后端進度；
- 模擬各種數據場景（如分頁、異常狀態）；
- 快速驗證頁面交互邏輯；
- 減少聯調階段的溝通成本。
最終實現“前后端并行開發”，顯著提升項目整體效率。
