在vite2和Vue3中配置Mockjs

在 Vite2 與 Vue3 中使用Mockjs時有一些官方文檔沒有提到的注意點，特意做此記錄。

1. MockJS 依賴的安裝

# 使用 npm 安裝
npm install mockjs vite-plugin-mock cross-env -D
# 使用 yarn 安裝
yarn add mockjs vite-plugin-mock cross-env -D

2. 在 package.json 中設置環境變量

{
    "scripts": {
        // 修改dev構建腳本的命令
        "dev": "cross-env NODE_ENV=development vite",
        "build": "vite build",
        "serve": "vite preview"
    }
}

3. 在 vite.config.js 中添加 mockjs 插件

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

export default defineConfig({
    plugins: [
        vue(),
        viteMockServe({
            supportTs: false
        })
    ],
});

4. 在項目中創建 mock 文件夾，在其中創建需要的數據接口

// 僅做示例: 通過GET請求返回一個名字數組
export default [
    {
        url: "/api/getUsers",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                data: ["tom", "jerry"],
            };
        },
    },
];

5. 在項目中使用此接口

fetch("/api/getUsers")
    .then(response => {
        response.json()
    })
    .then(data => {
        console.log(data)
    })

會得到如下返回值：

{
    code: 0,
    data: {
        0: "tom",
        1: "jerry",
    },
    length: 2,
    message: "ok"
}

至此，我們就完成了mockjs的配置。