vite-plugin-mock 实现开发环境下mock数据

使用vite-plugin-mock和mockjs实现开发环境下模拟数据，将模块分离

在项目中安装：

npm install vite-plugin-mock mockjs -D

在项目根目录下建立mock文件夹。注意不是在src下面。

viteMockServe会自动拦截请求且会热更新。

vite.config.ts

import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath:'mock'//mock的文件目录
    })
  ]
})

在mock文件夹下创建两个文件

//info.ts
import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/info',
    method: 'get',
    response: () => {
        return {
          code: 200,
          message: '请求成功',
          type: 'success',
          data: {
            "string|1-10": "★",
            "number|1-100": 100,
            data:'@date("yyyy-MM-dd")'
          }
        }
      }
  }
 
] as MockMethod[]

 

//user.ts
import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/user/login',
    method: 'get',
    response: () => {
        return {
          code: 200,
          message: '请求成功',
          data: {
            phone:1234567899,
            password:'123'
          }
        }
      }
  }
] as MockMethod[]

使用axios测试接口

axios.get("/api/info").then((res ) => {
  console.log('info-->',res);
})
axios.get("/api/user/login").then((res ) => {
  console.log('user-->',res);
})

可能遇到的问题

可以将mock文件中的断言去掉 ，暂时还不知道咋解决。

//info.ts
export default [
  {
    url: '/api/info',
    method: 'get',
    response: () => {
        return {
          code: 200,
          message: '请求成功',
          type: 'success',
          data: {
            "string|1-10": "★",
            "number|1-100": 100,
            data:'@date("yyyy-MM-dd")'
          }
        }
      }
  }
 
]