vue3+vite5+ts5环境使用vite-plugin-mock

步骤1 安装vite-plugin-mock

cnpm install mockjs vite-plugin-mock@2.9.6 -D

步骤2 vite.config.ts中添加

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        viteMockServe({
            mockPath: "./src/mock", // 设置模拟数据的存储文件夹
            localEnabled: true, //设置是否启用本地mock文件
            watchFiles: true,
        })
    ]
})

步骤3 在项目目录添加mock文件(与上面mockPath配置一致就行)，在vite下js文件也支持，如index.js，代码实例：

import Mock from 'mockjs'

function mockUserList() {
    const arr = []
    const permissions = [{'name':'add', 'id':'1'}, {'name': 'delete', 'id':2}, {'name':'update', 'id':3}, {'name':'query', 'id':4}]
    for (let i = 0; i < 2; i++) {
        arr.push({
            id: Mock.mock("@id"),
            'name|1': ['admin', 'manager', 'user'],
            permission: [permissions[Mock.Random.integer(0,3)]],
            date: Mock.mock("@date('yyyy-MM-dd')"),
            'status|0-1': 1,
            desc: Mock.mock('@cparagraph(5, 10)')
        })
    }
    return arr
}

export default [{
    url: '/api/user/list',
    methods: 'get',
    response: (request) => {
        console.log(request.query, "获取请求参数，object类型")
        console.log(request.body, "获取body数据，object类型")
        return {
            code: 200,
            data: mockUserList()
        }
    }
}]

步骤4 使用axios项目中发送请求

坑1： 解决viteMockServe中localEnabled报错问题

将vite-plugin-mock版本降为2.9.6或者改为Enabled

坑2：步骤4接收的响应是html，与mock定义的响应类型不一致问题

检查mock文件目录和mockPath是否一致
检查mock文件中url和axios配置的url是否一致
检查axios配置的baseURL的值和发送请求中url是否重复，比如配置了api，发送路径中不需要配置了（最后一步。。。。）