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=>{
// 头部携带token
return 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()
})