安裝依賴

分別安裝vite-plugin-mock跟mockjs兩個插件

npm install -D vite-plugin-mock mockjs

vite.config.ts中添加配置，主要是紅色標記的配置

注意此處如果配置出錯可能是vite-plugin-mock依賴的版本有問題，重新安裝一下依賴指定版本即可，這里推薦使用2.9.6版本的

// mock插件提供的方法
import { viteMockServe } from "vite-plugin-mock";// https://vitejs.dev/config/
export default defineConfig(({command})=>{return {plugins: [vue(),viteMockServe({localEnabled: command === "serve"//主要是這段配置}),createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]',})],resolve: {// 設置文件./src路徑為 @alias: {"@": path.resolve('./src')}},css: {preprocessorOptions: {scss: {additionalData: `@import "@/style/variable.scss";`,},},}}
})

根路徑（src平級的目錄）新建文件夾mock，新建文件user.ts添加以下代碼

// 用戶信息數據
function createUserList() {return [{userId: 1,userName: "admin",password: "123123",desc: "平臺管理員",roles: ["平臺管理員"],buttons: ["cuser.detail"], // 按鈕權限標識routes: ["home"], // 路由權限標識token: "Admin Token"},{userId: 2,userName: "system",password: "123456",desc: "系統管理員",roles: ["系統管理員"],buttons: ["cuser.detail", "cuser.user"],routes: ["home"],token: "System Token"}];}// 對外暴露一個數組：數組里面包含兩個接口// 1. 登錄接口  2. 獲取用戶信息接口export default [// 用戶登錄接口{url: "/api/user/login", // 請求地址method: "post", // 請求方式response: ({ body }) => {// 獲取請求體攜帶過來的用戶名與密碼const { userName, password } = body;// 調用獲取用戶信息函數，用于判斷是否有此用戶const checkUser = createUserList().find((item) => item.userName === userName && item.password === password);// 沒有用戶返回失敗信息if (!checkUser) {return { code: 201, data: { message: "賬號或者密碼不正確" } };}// 如果有返回成功信息const { token } = checkUser;return { code: 200, data: { token } };}},// 獲取用戶信息{url: "/api/user/info",method: "get",response: (request) => {// 獲取請求頭攜帶tokenconst token = request.headers.token;// 查看用戶信息是否包含有次token用戶const checkUser = createUserList().find((item) => item.token === token);// 沒有返回失敗信息if (!checkUser) {return { code: 201, data: { message: "獲取用戶信息失敗" } };}// 如果有返回成功信息return { code: 200, data: { checkUser } };}}];

?安裝axios進行測試

npm i axios

在頁面進行測試

import axios from "axios";
axios({url: "/api/user/login",method: "post",data: {userName: "admin",password: "123123"},headers: {"token": "weiuwieu"}
});

測試結果，響應結果為200，模擬請求成功