vite+vue3中vite-plugin-mock使用方式

1、插件安装

npm install mockjs vite-plugin-mock -D

2、添加mock目录及其文件
新建文件/src/mock/user.ts

import { MockMethod } from 'vite-plugin-mock';
// 单纯的使⽤⾃⼰的返回数据话，可以不⽤引⼊mockjs
// http://mockjs.com/examples.html
import Mock, { Random } from 'mockjs';
export default [
  {
    url: '/api/createUser',
    method: 'get',
    response: () => {
      return {
        code: 200,
        message: 'ok',
        data: Mock.mock({
          'list|4': [
            {
              id: '@id',
              name: '@cname',
              age: Random.integer(1, 100),
              address: '@county',
              city: '@city',
              province: '@province',
              email: Random.email(),
              phone: /^1[0-9]{10}$/,
              regin: '@region',
              url: '@url',
              date: Random.date('yyyy-MM-dd')
            }
          ]
        })
      };
    }
  }
] as MockMethod[];

3、在项目根文件夹下创建mockProdServer.js

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

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

4、在 vite.config.js 中使用vite-plugin-mock插件

// mock数据
import { viteMockServe } from 'vite-plugin-mock';
// https://vitejs.dev/config/
export default ({ mode, command }) => {
  const prodMock = false;
  return defineConfig({
    plugins: [
      ...
      viteMockServe({
        mockPath: './src/mock', // 设置模拟.ts 文件的存储文件夹
        localEnabled: command === 'serve', // 设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
        prodEnabled: command !== 'serve' && prodMock, // 设置打包是否启用 mock 功能
        supportTs: true, // 打开后，可以读取 ts ⽂件模块。请注意，打开后将⽆法监视.js ⽂件。
        watchFiles: true, // 监视⽂件更改，并重新加载 mock 数据
        /* 如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}
        这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。
        如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js
        */
        injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `
      })
    ],
  });
};

5、在tsconfig.json文件中

  "include": [ "src/mock/**/*.ts"],

6、在文件中调用

例：login/index.vue

...
onMounted(() => {
  axios.get('/api/createUser').then((res: any) => {
    console.log(res);
  });
});

image.png