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

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就可以看到所有接口及地址