前言

最近使用到了vue3.x + vite技术栈，由于后端api接口还未上线，为了提高开发效率，我想要去通过mock数据来进行模拟请求，由于以往是通过webpack来配置mock，所以这一次就和以往稍微不一样。

配置mock

安装vite插件vite-plugin-mock

npm install vite-plugin-mock -D

在vite.config.js中进行配置

import { viteMockServe } from 'vite-plugin-mock'
import { defineConfig } from 'vite'
export default defineConfig({
  resolve: {
    alias: {
      "@": pathResolve('src')
    }
  },
  plugins: [vue(),
    viteMockServe({
    //配置mock位置
      mockPath: "/src/mock",
    }),
  ],
})

这里axios请求就不再写出了，正常发起请求就行，我们假设需要mock来拦截的接口是users/login

//user.js
const login = {
  url: "/users/login", // 模拟登录的链接
  method: "post", // 请求方式
  timeout: 500, // 超时时间
  statusCode: 200, // 返回的http状态码
  response: { // 返回的结果集
    code: 200,
    message: "登录成功",
    data: {
      code: 0,
      message: "用户登录成功",
      result: {
        token: "123456789"
      }
    },
  },
}
export default [
  login
];
//index.js
import user from './user'
export default [
    user,
];

这样，mock就配置好了。

vite中使用mock

前言

配置mock