哎呀，今天咱们聊聊MockJS，这玩意儿可真是前端的救星。

你们知道吗，前端开发常常遇到这种情况。

功Neng写完了却等着后端给接口。

等得头发dou快变灰。

这时候Mock就Neng拯救你。

它是一个轻量级的模拟库。

Ke以在浏览器里生成随机数据。

还Neng拦截Ajax请求，让你得到预设的数据。

一是数据模板，你写一个JSON模板，它就帮你填满。

二是HTML模板，直接把HTML片段生成出来。

三是拦截请求，把真实接口换成mock数据。

因为后端可Neng还没完成。

或者接口经常改版，让人头疼。

有了Mock，你Ke以自己定义结构，随时修改。

You can finish UI、交互、逻辑验证，而不必等后端。这样开发节奏geng快。哈哈！

npm i mockjs -D
# 或者 yarn add mockjs --dev

// mock/index.js
import Mock from 'mockjs'
const posts = Mock.mock({
  'list|10': 
}).list
export default 

// main.js
import axios from 'axios'
import mock from './mock'
if  {
  // 把mock挂到axios上
  axios.interceptors.request.use(config => {
    const matched = mock.find
    if  {
      config.adapter =  => Promise.resolve({
        data: matched.response,
        status: 200,
        statusText: 'OK',
        headers: {},
        config,
        request: {}
      })
    }
    return config
  })
}
export default axios

说实话，有时候我会把mock文件改成TS，这样IDE会提示字段类型，geng安全。 而且Ru果你想模拟错误码，只需要在response里返回{statusCode：500}即可。 还有啊，在mock里Ke以用Random.pick来随机挑选标签，增加真实性。 这就是Mock的魅力所在——灵活且强大。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ViteMockServe } from 'vite-plugin-mock'
export default defineConfig({
  plugins:
})

#1.  先跑npm run dev；

#2.  打开浏览器，访问/api/posts；

#3.  控制台kan到mock返回的数据；

#4.  按需调整JSON模板；

#5.  当后端上线后只改baseURL即可。

// 多层嵌套示例
const complexData = Mock.mock({
  user:{
     id:'@guid',
     name:'@cname',
     age:'@integer',
     address:{
       province:'@province',
       city:'@city',
       street:'@county'
     },
     hobbies:
   },
   posts:
});
console.log;

response:=>{
   return new Promise(resolve=>{
      setTimeout=>{
          resolve
      }, Math.random*800+200)
   })
}