Vite+Mockjs

最新推荐文章于 2025-11-10 11:34:43 发布

原创最新推荐文章于 2025-11-10 11:34:43 发布 · 656 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

前端根据后端结构生成数据联调，不必等后端全部完成，等后端完成后把mock关闭即可，高效节约对接时间。

用法：

1.安装mock

yarn add mockjs vite-plugin-mock

2.配置引入位置 vite.config.js

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
   ...,
    viteMockServe({
      mockPath: './src/mock', // 解析mock的位置
      localEnabled: true // 是否开启开发环境
    })
  ]
})

3.生成数据

import Mock from 'mockjs'

export default [
  {
    url: '/mock/business/workerOrder/list',    
  // 这个url是要生成的数据接口地址，封装的axios请求，加上/mock即可
    method: 'get',
    response: () => {
      return Mock.mock({   // 生成数据结构根据后端协商
        'list|1-10': [
          {
            'id|+1': 1
          }
        ]
      })
    }
  }
]

** 具体生成数据规范参考官网 Mock.js

4.使用请求封装的api接口即可

import { listWorkerOrder } from '../api/info'
const getList = () => {
  listWorkerOrder().then(res => {
    console.log({ res })
  })
}

5.本地关闭mock

6.防止忘了关闭mock，引起线上问题