mockjs+vite-plugin-mock在V3+ts项目中的使用

第四人称Alice

已于 2024-05-20 09:36:22 修改

阅读量1.3k

点赞数 21

CC 4.0 BY-SA版权

分类专栏：前端插件文章标签：前端 vue.js javascript

于 2024-02-22 17:40:38 首次发布

本文链接：https://blog.csdn.net/weixin_50975849/article/details/135450402

前端插件专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用vite-plugin-mock进行API模拟，包括安装、基本配置、创建mock文件、响应参数处理以及拓展示例。适合前端开发小白学习mock数据管理在开发环境中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🔮 欢迎点赞 👍٩( ´︶` )( ´︶` )۶ 收藏 🌟留言 💌 欢迎讨论！💕
🔮 本文由【第四人称Alice】原创，首发于 CSDN ✨✨✨
🌍 由于博主还属于前期的前端开发小白，欢迎大家留言提出更好的意见，大家共同进步！💭

声明：博主的项目是vue3+ts

一、安装

npm i mockjs -D
npm i vite-plugin-mock -D
npm i axios

二、基础示例

1、创建mock文件

在src/mock/demo文件夹下新建test.ts文件

// src/mock/getInfo.ts

import { MockMethod } from "vite-plugin-mock";

export default [
  {
    url: "/api/getUserInfo", // url参数必须为string格式
    method: "get",
    response: () => {
      return "This is an example.";
    },
  },
] as MockMethod[];

2、在vite.config.ts中进行配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteMockServe } from "vite-plugin-mock";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: "./src/mock", // 设置模拟.ts 文件的存储文件夹
      enable: true, // 是否启用 mock 功能
    }),
  ],
});

注意：基础示例仅在本地开发环境中使用，如需在打包后仍然能够使用请参考官方文档中的

“在生产环境中使用”

https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md

3、在页面中使用

<script lang="ts" setup>
import axios from "axios";
import { onMounted, ref } from "vue";
let data = ref();
onMounted(() => {
  axios.get("/api/getUserInfo").then((res) => {
    console.log(res);
    data.value = res.data;
  });
});
</script>

<template>
  <p>{{ data }}</p>
</template>

<style scoped>
p {
  color: #d69e9e;
}
</style>

4、运行npm run dev

5、运行结果

运行结果

三、拓展示例

// src/mock/getList.ts
import { MockMethod } from "vite-plugin-mock";
export default [
  {
    url: "/api/getList",
    method: "post",
    timeout: 1000,
    // get请求使用query作为参数，post请求使用body作为参数
    response: ({ body }) => {
      // 对传入的参数做校验逻辑
      // console.log(body, "123query");//会在控制台打印出来
      return {
        code: 200,
        message: "ok",
        "data|5": [
          //'data|20',模拟20条数据,前面是参数，后面是值
          {
            // uid: "@id",// 生成一个随机的唯一标识符。
            //     "age|18-50": 18, // 'age|18-50' :18 从18开始随机18-50的年龄
            email: "@email()", // @email() 随机邮箱
            nickname: "@cname", // 生成一个随机的中文昵称。
            age: "@integer(10-100)", // 生成一个随机的年龄在10到100之间的整数。
            "id|+1": 0, // 'id|+1'：0，就是从0开始id自增1
            url: "@image", // 生成一个随机的图片链接。
            city: "@city", // 生成一个随机的城市名称。
            country: "@county(true)", // 生成一个随机的国家名称，带有省份信息。
            province: "@province", // 生成一个随机的省份名称。
            mobile_phone: "@phone", // 生成一个随机的手机号码。
            // email: "@email", // 生成一个随机的电子邮箱地址。
            region: "@region", // 生成一个随机的地区信息。
            date: "@date(yyyy-MM-dd)", // @date(yyyy-MM-dd) 随机日期
            description: "@paragraph", // @paragraph 随机签名介绍
            "menus|3": [
              {
                menu_name: "一级别导航",
                "id|+1": 0,
                code: "Nav1",
                "children|5": [
                  {
                    code: "about",
                    menu_url: "views/about",
                    access_permissions: '["about"]',
                    children: [],
                    menu_name: "测试1",
                    "id|+1": 0,
                  },
                ],
              },
            ],
          },
        ],
      };
    },
  },
] as MockMethod[];