vite项目中使用mockjs

安装

javascript 复制代码

    pnpm i mockjs -D
    pnpm i vite-plugin-mock -D

在项目根目录或者src下建mock文件夹，在文件夹下建不同的.js模块文件。如 login.js

javascript 复制代码

export default [
    {
       url: '/api/login',
       method: 'post',
       response: ({ body }) => {
        return {
          'code|1': [200, 401],
          data: body,
        }
      },
    }
];

// 若项目用的ts，需要给导出数组给类型
import type { MockMethod } from 'vite-plugin-mock';
export default [
    {
       url: '/api/login',
       method: 'post',
       response: ({ body }) => {
        return {
          'code|1': [200, 401],
          data: body,
        }
      },
    }
] as MockMethod[];

vite.config.js中配置mock

javascript 复制代码

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
const resolve = (dir) => path.join(__dirname, dir);
import { viteMockServe } from 'vite-plugin-mock'; // 引入

export default defineConfig({
  plugins: [
    react(),
    // 在插件中注册
    viteMockServe({
      mockPath: './src/mock', // mock文件夹的位置
    }),
  ],
  resolve: {
    alias: {
      '@': resolve('src'),
      '@assets': resolve('src/assets'),
      '@components': resolve('src/components'),
      '@router': resolve('src/router'), // 路由
      '@utils': resolve('src/utils'), // 公用js
      '@views': resolve('src/views'),
      '@api': resolve('src/api'),
    },
  },
  server: {
    port: 8080,
    host: "0.0.0.0",
  }
})

此时就可以在项目中正常使用接口 /api/login

在src/api/login.js中正常封装api

javascript 复制代码

import request from '@/utils/request.js';

export const setLogin = (data) => {
    return request.post('/login', data);
}

在具体页面中使用该api

javascript 复制代码

    const onFinish = (values) => {
        const { ehireId } = values;
        try {
            setLogin({ ehireId }).then(({code, data}) => {
                if (code === 200 && data) {
                    navigate('/talentmanagement');
                } else {
                    openErrorTip();
                }
            });
        } catch (error) {
            openErrorTip();
        }
    };

开发环境使用的话，以上就可以了，但要在生产环境使用，需要做一下处理，但没验证过

在mock文件夹下建index.js文件

javascript 复制代码

import { createProdMockServer  } from 'vite-plugin-mock/es/createProdMockServer'
import m_login from './login.js'

// const modules = import.meta.glob('./*.js', { eager: true });
// const mockModules = [];
// Object.keys(modules).forEach((key) => {
//   if (key.includes('/_')) {
//     return;
//   }
//   mockModules.push(...modules[key].default);
// });

export default function setupMock () {
    // createProdMockServer(mockModules);
    createProdMockServer([...m_login]);
}

要么在mian.js中引入 mock/index.js 并注册 setupMock()
要么vite.config.js插件配置时

javascript 复制代码

export default ({ command }) => {

  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', //解析根目录下的mock文件夹
        localEnabled: command === 'serve', //开发打包开关
        prodEnabled: command !== 'serve' ,// 生产打包开关
        supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
    //这样可以控制关闭mock的时候不让mock打包到最终代码内
      injectCode: `
          import { setupMock } from '../mock';
          setupMock();
          `,
      }),
    ],
  }
}

开发环境或本地开发也可以注册 setupMock,没有啥影响

建环境变量 VITE_APP_MOCK=true
mian.js中

javascript 复制代码

import setupMock from './mock/index.js'; //mock
if(import.meta.env === 'development' && import.meta.VITE_REACT_APP_MOCK){ //dev环境开启mock
     setupMock();
}