在 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的配置。

本文來自部落格園，作者：凍羊，轉載請註明原文連結：https://www.cnblogs.com/wdyyy/p/mockjs_vite2.html