1、安裝mockjs

npm i mockjs

2、安裝vite-plugin-mock

npm i vite-plugin-mock -D

3、安裝axios

npm i axios

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

login.ts的內(nèi)容

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

5.在vite.config.ts進(jìn)行個(gè)人配置

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 ,// 是否開(kāi)啟開(kāi)發(fā)環(huán)境,enable: command === 'serve', // 是否使用mock接口；等于serve是開(kāi)發(fā)階段使用mock接口})],resolve: {alias: {'@': path.resolve(__dirname, './src')}},
})

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

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

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

// 導(dǎo)入axios實(shí)例
import request from '@/axios/index'
export function login(params){return request.Request('',params,'/mock-login')
}

8.頁(yè)面內(nèi)使用

<template><div class="test"><h1>我是登錄頁(yè)面</h1><button @click="increment">點(diǎn)擊我開(kāi)始登錄了</button><span v-show="showLogin">登錄后我就開(kāi)始顯示了{(lán){ dataList }}</span></div>
</template>
<script setup>
import { ref } from 'vue'
import { login } from '@/api/login/index'
let showLogin = ref(false)
let dataList = ref([])
function increment() {login({}).then((res) => {console.log('login', res)dataList.value = resshowLogin.value = true})
}
</script><style>
</style>

效果如下：