vite4+vue3项目快速mock接口数据?

136 阅读1分钟

1、安装依赖

// 安装
"mockjs": "^1.1.0",
"vite-plugin-mock": "^2.9.8",
"@types/mockjs": "^1.0.7",

2、配置vite.config.ts文件


import { viteMockServe } from "vite-plugin-mock"
export default ({ mode, command }: ConfigEnv): UserConfig => {
return {
    plugins: [
        viteMockServe({
            mockPath: "src/mock",
            // localEnabled: process.env.NODE_ENV !== "production", // true的时候会请求本地
            localEnabled: command === "serve", // 开发时应用, // true的时候会请求mock
            logger: true
      })
    ]
}
})

3、src目录中新增mock文件夹,创建test.ts文件

import type { MockMethod } from "vite-plugin-mock"
export default [
  {
    url: "/test/test", // 请求/test/test即刻获取mock数据
    method: "post",
    response: ({ body, query }) => {
      // console.log("body>>>>>>>>", body)
      // console.log("query>>>>>>>>", query)
      return {
        success: true,
        status: -1,
        msg: "mock成功",
        data: []
      }
    }
  }
] as MockMethod[]

注意url和接口一致时会优先走mock数据