vue3+ts+vite项目中mock数据

1、安装vite-plugin-mock插件依赖,此插件依赖mockjs ,所以同时要安装上

npm i viteMockServe mockjs -D

2、在vite.config.ts中配置相关插件

import { UserConfigExport, ConfigEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import { viteMockServe } from "vite-plugin-mock";

export default ({ command }: ConfigEnv): UserConfigExport => {
    return {
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "src"),
            },
        },
        plugins: [
            vue(),
              /*vite-plugin-mock配置项*/
            viteMockServe({
                mockPath: "mock",
                localEnabled: command === "serve",
            }),
        ],
    };
};

3、在项目根目录下创建名为mock的文件夹

4、创建相关mock数据，下面以user.ts为例：

function createUserList() {
    return [
        {
            userId: 1,
            avatar: "",
            username: "admin",
            password: "111111",
            token: "Admin Token",
        },
    ];
}

//对外暴露一个数组：数组含2个接口
export default [
    //login
    {
        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 } };
        },
    },
    //getUserInfo
    {
        url: "/api/user/info",
        method: "get",
        response: (req) => {
            const token = req.headers.token;
            const checkUser = createUserList().find(
                (item) => item.token === token
            );
            if (!checkUser) {
                return { code: 201, data: { message: "获取用户信息失败" } };
            }
            return { code: 200, data: { checkUser } };
        },
    },
];

5、使用axios测试

import axios from "axios";

axios({
    url: "/api/user/login",
    method: "post",
    data: {
        username: "admin",
        password: "1111111",
    },
});