Vue3项目--mock数据

用户93816912553602025-11-26 15:38

一、安装mock插件

pnpm add mockjs pnpm add vite-plugin-mock -D

二、配置

在vite.config.ts文件中，配置mock环境以及路径

javascript 复制代码

// vite.cofig.ts

import { defineConfig } from 'vite'
// mock插件提供方法
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', //mock文件所在的路径
        enable: command === 'serve' //保证开发环境可以使用mock接口
      })
    ],
  }
})

在项目根目录下创建mock文件夹，在里面创建我们需要的数据与接口。

创建文件mock/test.ts.

javascript 复制代码

// test.ts

import { MockMethod, MockConfig } from 'vite-plugin-mock'
export default [
  {
    url: '/api/get',
    method: 'get',
    response: ({ query }) => {
      return {
        code: 0,
        data: {
          name: 'vben',
        },
      }
    },
  },
  {
    url: '/api/post',
    method: 'post',
    timeout: 2000,
    response: {
      code: 0,
      data: {
        name: 'vben',
      },
    },
  },
  {
    url: '/api/text',
    method: 'post',
    rawResponse: async (req, res) => {
      let reqbody = ''
      await new Promise((resolve) => {
        req.on('data', (chunk) => {
          reqbody += chunk
        })
        req.on('end', () => resolve(undefined))
      })
      res.setHeader('Content-Type', 'text/plain')
      res.statusCode = 200
      res.end(`hello, ${reqbody}`)
    },
  },
] as MockMethod[]

export default function (config: MockConfig) {
  return [
    {
      url: '/api/text',
      method: 'post',
      rawResponse: async (req, res) => {
        let reqbody = ''
        await new Promise((resolve) => {
          req.on('data', (chunk) => {
            reqbody += chunk
          })
          req.on('end', () => resolve(undefined))
        })
        res.setHeader('Content-Type', 'text/plain')
        res.statusCode = 200
        res.end(`hello, ${reqbody}`)
      },
    },
  ]
}

调用mock接口。

csharp 复制代码

// App.vue

axios.get('/api/get')

调用mock接口后，在F12控制台中可以看到接口请求成功。