前言

本篇主要介绍mock数据插件的使用。

上一篇传送门

Vue实战之从零搭建Vite2+Vue3全家桶（三）

场景

在前后端分离的开发场景中，通常会存在这么一个问题，后端接口还未开发完成，前端已经写好了页面，需要等待后端兄弟给出接口及接口文档之后，才能继续开发联调。

为了解决这个问题，现在前端可以通过mock数据的方式模拟后端接口提前进行接口调试，等待后端接口开发好以后切换过去进行测试联调。

安装mock

  npm install mockjs vite-plugin-mock cross-env -D

修改package.json

{
  "scripts": {
    // 修改dev命令
    "mock": "cross-env NODE_ENV=development vite"
    ...
  }
}

修改vite.config.js

import { viteMockServe } from "vite-plugin-mock"
plugins: [
  vue(),
  viteMockServe({
      supportTs: false,
      mockPath: 'src/mock' // mock默认根目录，如果放置在其他目录下，通过此参数指定路径
  })
]

创建mock数据

# 在根目录下创建mock文件夹，然后创建index.js
export default [
  {
    url: '/api/login',
    method: 'post',
    response: () => {
      return {
        code: 200,
        message: 'success',
        data: {
          token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJhdhwIjoxNjI3NTMxNjcwfQ'
        }
      }
    }
  }
]

调用API请求

<template>
...
axios.get('/api/login').then(res => {
  console.log(res)
})
...
</template>

下一篇计划

计划写一写用户登录和权限管理方面的内容。

往期传送门

Vue实战之从零搭建Vite2+Vue3全家桶（三）

Vue实战之从零搭建Vite2+Vue3全家桶（二）

Vue实战之从零搭建Vite2+Vue3全家桶（一）

基于Vue的架构设计