vite使用mock插件的配置(vite-plugin-mock)

mock经常在项目中使用，配置也是常有的事，故在此记录下来

一、安装依赖

# 使用 npm 安装
npm install mockjs vite-plugin-mock
# 使用 yarn 安装
yarn add mockjs vite-plugin-mock

二、配置

1、在项目的根目录 vite.config,ts

import type { ConfigEnv, UserConfig } from 'vite';

import mockPlugin './build/vite/plugin';


export default ({ mode }: ConfigEnv): UserConfig => {

  const VITE_PORT = '8080'
  const VITE_PROXY_URL = 'https://222.222.222.222'
  return {
    plugins: mockPlugin(true/false), //在这个文件里面，可以配置mock的一些属性  true/false代表的是mock开关 
    base: './',
    resolve: {
       ....
    },
    css: {
       .....
    },
    server: {
      port: VITE_PORT,   //端口
      open: '/',
      host: '0.0.0.0',   //本地地址：localhost或者其他
      https: true,
      proxy: {           //代理
        '/iotp': {
          target: VITE_PROXY_URL,    //请求的url，例后端给的地址
          changeOrigin: true,        //当进行代理时，Host 头部的源默认会保持原状；你可以设置 changeOrigin 为 true 来覆盖这种行为；变成target对应得地址
          secure: false,             // 关闭SSL证书校验
          rewrite: path => {         //重定地址，比如：把以/aaa开头的地址换成''
            return path.replace(/^\/aaaa/, '');
          },
        },
      },
    },
    build: {
      rollupOptions: {
        input: {
          main: resolve(process.cwd(), 'index.html'),
        },
      },
    },
  };
};

2、在./build/vite/plugin文件里面（此处文件是自行创建的）

import type { Plugin } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';

export default function mockPlugin(VITE_USE_MOCK: boolean) {
  return {
    ...viteMockServe({
      mockPath: 'mock',          //mock文件路径，在根路径下创建一个mock文件
      localEnabled: VITE_USE_MOCK, //mock开关
      prodEnabled: false,         //生产环境下为false，这样就不会被打包到生产包中
      ignore: /^\_/,       //忽略开始_路径
    }),
  } as Plugin;
}

3、在根目录创建一个mock文件，下面再细分各种文件，例如创建一个api / login.ts

export default [
  {
    url: "/api/login",
    method: "post",
    response: () => {
      return {
        code: 200,
        message: "ok",
        data: {success:true}
      };
    }
  }
];

4、在外部调用的话，就是正常的调用，直接

axios.post('/api/login',xxx,xxx)

注意： axios要自己内部封装哈

5、额外补充：上面的案例是mock接口成功的，如果想要mock接口失败，那就在第3步

export default [

{} //空对象即可

]

此时接口会返回401状态码，就能对接口失败做后续处理

6、至此，一个mock完成

vite使用mock插件的配置(vite-plugin-mock)

猜你喜欢