vite和mockjs配合使用

vite + mockjs

当后端还没准备完成之前，前端可以使用 mock 模拟后端响应，提高开发效率

1、安装插件

使用 vite-plugin-mock 插件，配合mockjs完成项目的 mock 配置

npm install mockjs vite-plugin-mock

2、vite配置插件

在 vite.config.js 文件中引入对应插件

import { viteMockServe } from 'vite-plugin-mock'...plugins: [vue(),viteMockServe({mockPath: './mock'  // mock数据所在的目录 ./mock 代表和vite.config.js同级目录即根目录})
]

3、mock数据编辑

根目录创建mock，mock目录下创建index.js

import Mock from "mockjs"
export default [{url: "/login",method: "post",response: (res) => {return {status:200,code:1,result:res.body  // res.body 接口传过来的参数}},}
]

4、main.js 引入mock数据

// 模拟接口mockjs
import '../mock/index'

5、配合axios使用

下载 axios

npm install axios

封装axios

src 目录下创建utils目录，utils下创建request.js（文件命名自定义，一般为request或者http）

import axios from 'axios'
const service = axios.create({baseURL:'' // mockjs 模拟数据这里必须为空,否则请求报404 
})
// 请求拦截器
service.interceptors.request.use(config=>{// 头部携带tokenreturn config;
})// 响应拦截器
service.interceptors.response.use(res=>{return res;
},err=>{return Promise.reject(err)
})export default service;

封装api

src 目录下新建 api 文件夹，api下创建 api.js

import request from '../utils/request'//  登录
export const login = (data)=>{return request({method:'post',url:'/login',data:data})
}

使用axios

import {login} from '../../api/api'const getTest = async ()=>{let res = await login({name:'张三',pwd:'123456'})
}onMounted(()=>{getTest()
})