VUE3使用Mock来模拟后台接口请求

安装插件vite-plugin-mock-dev-server

pacakage.json 文件

{
  "name": "h5test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "element-plus": "^2.5.3",
    "pinia": "^2.1.7",
    "postcss-px-to-viewport": "^1.1.1",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
    "vant": "^4.8.1",
    "vue": "^3.3.11",
    "vue-router": "4",
    "yarn": "^1.22.21"
  },
  "devDependencies": {
    "vite-plugin-mock-dev-server": "^1.4.5",
    "@vitejs/plugin-vue": "^4.6.2",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.8"
  }
}

单独安装 vite-plugin-mock-dev-server

官方推荐 pnpm

npm 安装方式

npm i -D vite-plugin-mock-dev-server

yarn 安装方式

yarn i -D vite-plugin-mock-dev-server

pnpm 安装方式

pnpm i -D vite-plugin-mock-dev-server

如何使用

第一步 引入插件

在你的项目的 vite.config.{ts,js}文件中，引入并配置插件:

::: code-group

import { defineConfig } from 'vite'

import mockDevServerPlugin from 'vite-plugin-mock-dev-server' // [!code ++]

export default defineConfig({
  plugins: [
    mockDevServerPlugin(), // [!code ++]
  ],
})

const mockDevServerPlugin = require('vite-plugin-mock-dev-server') // [!code ++]
/**
 * @type {import('vite').defineConfig}
 */
module.exports = {
  plugins: [
    mockDevServerPlugin(), // [!code ++]
  ],
}

:::

第二步 配置 server.proxy

本插件会直接读取 server.proxy 配置的 请求路径前缀，作为请求拦截路径匹配。

因为在一般场景中，在开发环境中，我们配置的 server.proxy 代理转发配置，会直接转发后端服务的开发环境的地址， 在后端服务未完成接口开发但已经提供了接口文档时，我们也只需要对这部分接口进行 mock，使得前端的接口接入流程能并行开发。 因此，本插件直接读取 server.proxy 配置，从而减少插件需要配置的参数复杂度。

import { defineConfig } from 'vite'
import mockDevServerPlugin from 'vite-plugin-mock-dev-server'

export default defineConfig({
  plugins: [
    mockDevServerPlugin(),
  ],
  server: { 
    proxy: { 
      '^/api': 'http://example.com/', 
    }, 
  }, 
})

第三步 添加 /mock 目录

在你的项目根目录下， 添加 /mock 目录，mock 目录将用于统一保存并管理所有的 mock配置文件。

.
├── mock
├── src
└── package.json

第四步 编写 mock配置文件

在 /mock 目录中，新增 **/*.mock.{js,ts,cjs,cts,mjs,mts,json,json5} 格式文件。

本插件通过 fast-glob 模块进行文件匹配，自动加载文件，并监听文件以及依赖文件，实现热更新。

同时，支持 使用 javascript/typescript/json/json5 等文件格式， 还支持 ESModule/Commonjs 模块规范编写代码。

插件会根据项目 package.json 的 type 字段值判断 项目默认使用的模块类型，并通过文件后缀格式判断模块类型

{
  "esm": [".mjs", ".mts"],
  "cjs": [".cjs", ".cts"]
}

.js/.ts 文件根据 package.json 的 type 字段值判断， 默认为 cjs。

新增 *.mock.ts 文件：

.
├── mock
│   └── api.mock.ts // [!code ++]
├── src
└── package.json

插件提供了 defineMock() 函数帮助编写 mock 配置。

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/test',
  body: {}
})

第五步 启动 Vite 开发服务

启动你的 Vite 开发服务，即可在项目中使用 插件了！

通过 server.proxy 代理的请求，被你的mock配置 命中的请求路径，都会返回 mock数据。

参考示例代码

码云项目地址

• https://gitee.com/peter2009/vue3-h5-demo.git

代码分支

• feature-demo-mock

在线ide

• https://gitee.com/-/ide/project/peter2009/vue3-h5-demo/edit/vue3-ele-admin-study/-/mock/user.mock.ts

# 检出代码
git clone https://gitee.com/peter2009/vue3-h5-demo.git

# 切换分支
git checkout feature-demo-mock