vue3项目中使用vite-plugin-mock

1、安装插件

npm i mockjs vite-plugin-mock --save-dev

2、修改配置文件 vite.config.js

import { viteMockServe } from 'vite-plugin-mock'

 plugins: [vue(),
    viteMockServe({
      supportTs:false,
      logger: false,
      mockPath: "/mock/"   // 注意：此时的 mockPath 地址是项目根目录下的 mock 文件夹的地址，而不是src目录下;
    })
  ]

----------------------------------------------

说明：

supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件 

logger?:boolean; --是否在控制台显示请求日志

mockPath?: string; --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径

3、在根目录下创建mock文件夹及index.js文件

export default [
  {
    url: '/sys/login',
    method: 'post',
    response: () => {
      return {
        status: 200,
        message: '成功'
      }
    }
  }
]

 

4、利用axios调用

import request from '@/utils/http'

export const loginApi = (data) => {
  return request({
    url: '/sys/login',
    method: 'POST',
    data
  })
}