1、安裝mockjs

yarn add mockjs -S 或 npm i mockjs -D

2、安裝vite-plugin-mock

npm i vite-plugin-mock -D

3、在src目錄下創(chuàng)建mock文件夾,在文件夾內(nèi)創(chuàng)建login.ts等文件，并在文件夾內(nèi)放置以下內(nèi)容（注：URL要和真實請求地址保持一致）

import { MockMethod } from "vite-plugin-mock";
export default [
  {
    url: "/mock-login", // 注意，這里只能是string格式
    method: "post",
    response: () => {
      return {
        menusList: [1,2,3,4,],
      };
    },
  },
] as MockMethod[]

4、在vite.config.ts進(jìn)行個人配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

import path from "path"

export default defineConfig({
  plugins:[
    vue(),
    viteMockServe({
      mockPath: "./src/mock/", // 指向mock下的文件
      localEnabled: true // 是否開啟開發(fā)環(huán)境
    }
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
})

配置路徑別名時需要在tsconfig.json文件下配置
{
  "paths": {
    "@/*": ["src/*"]
  }
}

5、下載axios

npm i axios

6、封裝請求，創(chuàng)建axios文件夾，文件夾下創(chuàng)建index.ts文件，文件內(nèi)放置以下內(nèi)容

import axios from 'axios'
// 創(chuàng)建一個 axios 實例
const service = axios.create({
    baseURL: '', // 所有的請求地址前綴部分
    timeout: 60000, // 請求超時時間毫秒
    withCredentials: true, // 異步請求攜帶cookie
    // headers: {
        // 設(shè)置后端需要的傳參類型
        // 'Content-Type': 'application/json',
        // 'token': 'your token',
        // 'X-Requested-With': 'XMLHttpRequest',
    // },
})
// 添加請求攔截器
service.interceptors.request.use(
    function (config) {
        // 在發(fā)送請求之前做些什么
        return config
    },
    function (error) {
        // 對請求錯誤做些什么
        console.error('請求錯誤',error)
        return Promise.reject(error)
    }
)
// 添加響應(yīng)攔截器
service.interceptors.response.use(
    function (response) {
        // 對響應(yīng)數(shù)據(jù)做點什么
        return response.data
    },
    function (error) {
        return Promise.reject(error)
    }
)

export default service

8、使用封裝的請求：創(chuàng)建api文件夾，例：login.ts，文件夾下放置以下內(nèi)容

// 導(dǎo)入axios實例
import httpRequest from '@/axios/index'
export function login() {
    return httpRequest({
        url: '/mock-login',
        method: 'post',
    })
}
export default {
    login
}

9、頁面內(nèi)使用

import { login } from "@/api/login/index";
login().then((res) => {
  console.log("login", res);
});

效果如下：

請求截圖

打印如下：

打印截圖