模拟接口数据，前端开发必备：mock-service-plugin安装及配置

本文链接：https://blog.csdn.net/NO3340971/article/details/138299475

mock-service-plugin

TIPS: 这里以vue3项目开发为例进行配置说明。

安装 `mock-service-plugin`

npm i mock-service-plugin --save-dev

配置 `mock-service-plugin`

// vite.config.ts

import MockServicePlugin from 'mock-service-plugin';

...
  // 在 plugins 初始化插件
  plugins: [
    ...
    new MockServicePlugin({
      // mock 数据的存放路径
      path: resolve(__dirname, "./src/apis/mocks"),
      // 代理服务器端口，默认为 3000
      port: 9090,
    }),
  ],
...
... 
  // 端口和代理
  server: {
    host: '127.0.0.1',
    port: 3000,
    proxy: {
      '/api': {
        // 指向mock服务地址
        target: 'http://localhost:9090/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/'),
      },
    },
  },
...

Mock 数据接口配置

在./src/apis/mocks目录下新建一个数据文件，例如 ./src/apis/mocks/userApi.index.json，它对应的是真实用户列表接口：

/**
 * @url /user/index
 * @method POST
 * @title 用户列表接口
 * @content 说明
 * @param {string} userid
 * @param {string} password
 */
{
  "code": 0,
  "message": "success",
  "result|5-10": [
    {
      "name": "@cname",
      "id": "@guid",
      "email": "@email"
    }
  ]
}

头部注释说明

@url： 访问路径 （必填项）
@title： 接口名称 （非必填）
@method：请求方法（非必填）
@param：请求参数（非必填）
@content：页面说明/接口说明/备注（非必填）

头部注释中的 @url 字段是必须的，当请求发送到 mock 服务器上时, mock 服务会遍历mocks文件夹下所有的.json文件, 将请求 url 与头部注释 @url 中的字段匹配, 匹配成功返回 json 中的数据。

数据配置说明

|5-10 这个数组随机包含5~10个元素；
@id 生成一个id
@guid 生成一个uuid
@increment 生成一个全局的自增整数
@city(true) 加true显示省级和市级，没有则显示市级
@cname 随机生成一个常见的中文姓名
@email 随机生成一个email
@ip 随机生成一个ip
@natural(1, 80) 随机生成一个整数自然数
@integer(100,5000) 100到5000的随机整数
@cword(2,6) 随机生成2-6个汉字
@ctitle(5,20) 随机生成5-20个汉字的标题
@csentence(20,30) 随机生成一段中文句子
@cparagraph(3,10) 随机生成3到10个句子的段落
@image(100x80,#fff,#e35ef1,png,@word(2)) 生成图片：图片宽高、背景颜色、文本颜色、图片类型、文本信息
@date(yyyy-MM-dd hh:mm:ss) 随机生成时间日期
@now(yyyy-MM-dd hh:mm:ss) 随机当前时间日期

启动项目

npm run dev

> vue3-test@0.0.0 dev
> vite

 --------------------------------- 
 [mock 服务] http://localhost:9090 
 --------------------------------- 

 VITE v5.2.10  ready in 583 ms

  ➜  Local:   http://127.0.0.1:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

在浏览器中打开 http://localhost:9090就可以看到所有接口及地址