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=>{
    // 头部携带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()
})
相关推荐
dy17173 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
凉白开<--7 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go8 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5