一、安装mockjs
yarn add mockjs -S 或 npm i mockjs -D
二、安装vite-plugin-mock
npm i vite-plugin-mock -D
三、在src/mock文件夹下创建index.js 文件
1. 在index.js 写你想要的数据
注意 ：如果里面有图片要放到public/imgs文件夹里面，要不然图片渲染不到页面上，
export default [{url: "/api/getUsers", //这里只能是string格式method: "get",response: () => {return {code: 0,message: "ok",data: {'rows|10': [{id: '@guid',name: '@cname','age|20-30': 23,'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']}]},}}},{url:'/api/bannerlist',method:'get',response:()=>{return {code: 200,message: "ok",list:[{"id":"1","img": "../../public/imgs/17.jpg" // 注意如果里面有图片要放到public/imgs文件夹里面，要不然图片渲染不到页面上，},{"id":"1","img": "../../public/imgs/18.jpg"},]}}},{url: '/api/getUserInfo', // 注意，这里只能是string格式method: 'get',response: () => {return {menusList: [{id: '1',title: '南辰',subMenuList: [{id: '11',title: '南',path: '/user/nan'},}]}]
四、安装 axios
npm install axios
1.在 axios 文件夹下面得index.js 引入
import axios from "axios";// 假数据const instance = axios.create({baseURL: '',timeout: 5000,headers: {'X-Custom-Header': 'foobar'}});// 添加请求拦截器instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});export default instance
五、封装 axios 统一管理 api
import http from '../utils/index'// 假数据export const list = () => {return http({method: 'get',url: 'api/getUsers' // 必须和 mock 里面的url 操持一致})}export const person=()=>{return http ({method:'get',url:'/api/getUserInfo'})}
六 、在vite.config.s进行个人配置
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { viteMockServe } from 'vite-plugin-mock'// https://vitejs.dev/config/export default defineConfig({plugins: [vue(),// mock 假数据viteMockServe({mockPath: "./src/mock/", // 解析，路径可根据实际变动localEnabled: true, // 此处可以手动设置为true，也可以根据官方文档格式supportTs: false,logger: true})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}})
七、组件引入使用
<template><div class="about"><h1>This is an about page</h1></div></template><script setup>import {list ,person} from '../api/index'import { onMounted } from 'vue';onMounted(async()=>{let res=await list()console.log(res);let data= await person()console.log(data);})</script><style></style>
八、打印结果
