vue3+ts+vite プロジェクトのモックデータ

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. 関連するモックデータを作成します。以下の例として 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",
    },
});

vue3+ts+vite プロジェクトのモックデータ

おすすめ