Vue3+Vite项目使用mockjs模拟数据

一、安装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))
    }
  }
})

七、组件引入使用

八、打印结果