插件官方地址

1. 安装vite-plugin-mock

npm i axios mockjs -s
npm i cross-env vite-plugin-mock -D

2. 新建mock文件夹，存放本地mock文件

// user.js
export default [
  {
    url: '/api/createUser',
    method: 'post',
    response: ({ body }) => {
      return {
        code: 0,
        message: 'ok',
        data: null,
      }
    },
  },
]

3. 在src根目录下创建mockProdServer.js文件

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import userMock from '../mock/user'

export function setupProdMockServer() {
  createProdMockServer([ ...userMock])
}

4. vite.config.js文件配置

import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default ({ command }) => {
  let prodMock = true
  return {
    plugins: [
      vue(),
      viteMockServe({
        // default
        mockPath: 'mock',
        localEnabled: command === 'serve',
        prodEnabled: command !== 'serve' && prodMock,
        injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `,
      }),
    ],
  }
}

5. 本地mock

删除vite.config.js中viteMockServe配置下的injectCode和prodEnabled选项，或将prodMock = false
在main.js中添加

import { setupProdMockServer } from './mockProdServer';
if(import.meta.env === 'development'){
  setupProdMockServer()
}