在vite中使用mockjs， vite中使用vite-plugin-mock

news2025/10/31 19:36:39

相信前端同学都会碰见类似的问题，就是页面可能很快写完了，但是接口同学还在缓慢设计表中！
这个时候咳咳，你就可以去摸鱼了或者看小说了

但实际上可不能这样哦，要老老实实做个打工人

步入正题了
在vite中有个mock的插件可以让我们直接使用了

pnpm add vite-plugin-mock -D
or
npm install vite-plugin-mock -D
or
yarn add vite-plugin-mock -D

这里插一句哈，如果你使用的是pnpm的话，正常来说因为这个插件肯定是依赖mockjs 的但是，他可能不会自动安装
需要你需要在项目目录下创建（记住并不是src下哦）
.npmrc

shamefully-hoist=true
strict-peer-dependencies=false
shell-emulator=true

然后还有一个小建议就是最新版本的插件也就是 3.0.0 有可能报 esbuild 就是大概你用到commonJS中的reuqired方法报错
这个时候建议你更新到低版本比如 pnpm add vite-plugin-mock@2.9.6 -D

安装好了之后就可以进行配置使用了
在目录下创建一个 mock目录然后我们创建一个 list.js

export default [
  {
    url: "/getHeroList",
    method: "post",
    response: () => {
      return {
        success: true,
        data: {
          list: [
            { name: "赵云", age: 1000},
            { name: "张飞", age: 2000},
            { name: "关羽", age: 3000},
            { name: "马超", age: 4000},
            { name: "黄忠", age: 5000},
          ]
        }
      };
    }
  }
]

在vite.config.js文件中配置下

import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig(({ command }) => {
  return {
  	...
    plugins: [
			 viteMockServe({
            // 指定您的模拟文件的路径
            mockPath: 'mock',
            localEnabled: command === "serve",
            prodEnabled: false,
            logger: false,
        }),
		],
    ...
  }
})

然后就可以在组件中发起请求试试看了

import { getHeroList } from "@/api";
import { onMounted } from "vue"
onMounted(() => {
    getHeroList().then(res => {
        console.log(res, '===hero')
    }).catch(error => {
        console.log(error, '=')
    })
})