vite构建的vue3项目内mockjs的使用

技术栈：vue3+vite+mockjs

用法一：

1、首先安装对应的依赖 vite-plugin-mock，我这里是使用npm安装的，也可以选择其他安装方式；

npm install vite-plugin-mock -D

2、项目内src文件夹下新建文件夹，我这里创建的文件夹名称为http，之后在http文件夹内部创建mock文件夹，内部创建index.js文件；

也可以直接在http文件夹之下创建index文件，我这里方便做功能划分，所以有嵌套，具体看情况决定就可以；

路径：src-->http-->mock-->index.js；

index.js文件内部写法：

export default [
    {
        url: "/mock/login", // 模拟登录的链接
        method: "get", // 请求方式
        timeout: 3000, // 超时时间
        statusCode: 200, // 返回的http状态码
        response: { // 返回的结果集
            code: 200,
            message: "登录",
            data: {
                content: "登录成功"
            },
        },
    },
  {
        url: "/mock/getMenuList", // 模拟登录的链接
        method: "get", // 请求方式
        timeout: 3000, // 超时时间
        statusCode: 200, // 返回的http状态码
        response: { // 返回的结果集
            code: 200,
            message: "获取菜单",
            data: {
                content: "获取菜单成功"
            },
        },
    },
]

3、在vite.config.js文件内部添加配置，vite.config.js文件内部写法：

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

export default defineConfig({
  plugins: [
    // 配置mock
    viteMockServe({
            mockPath: "./src/http/mock",
            localEnabled: true,
        })
  ],
})

按以上步骤操作之后，即可在项目内部使用mock.js了，无需在main.js内引入其他文件；

 

用法二：

1、首先安装mock.js依赖，我这里也是使用npm进行安装

npm install mockjs --save-dev

2、安装完成之后在项目内部创建mock文件夹，内部创建mockService.js文件，并在内部引入mock.js;

src-->mock-->mockService.js

mockService内部写法：

import Mock from 'mockjs'

// "/mock/login"为接口路径，get为请求方式，options内可获取相关参数
// 如果不需要传递参数的时候直接写成"/mock/login"形式即可
// 如果需要传递参数，则需要用正则处理，否则会因为路径问题出现404的问题
Mock.mock(/\/mock\/login/, 'get', (options)=>{
  // 这里通过options获取接口参数
  // 不同的请求方式，获取参数的方式不同，但是都在options内部
  // 根据自己的需求进行处理即可
  console.log(options)
  return {a:1}
})
Mock.mock(/\/mock\/getMenuList/, 'get', (options)=>{
  return {a:1}
})
export default Mock

3、在main.js内部引入mock所在文件

import "./mock/mockService";

之后即可正常使用进行数据mock；