Vite+Vue3使用MockJS

在使用Vue3开发的时候，有时候没有后端或者后端接口还没有准备好，那就需要使用Mock模拟数据便于前端开发。

现在就记录一下Vite+Vue3的环境下如果使用MockJS。

版本

• vue 3.3.11
• mockjs 1.1.0
• axios 1.6.3

Mockjs配置使用

使用pnpm命令安装Mockjs

pnpm install axios
pnpm install mockjs

mock模拟接口

在src目录下新建文件夹mock，并新建文件index.ts，引入mockjs

import Mock from 'mockjs'

直接在上面引入，在vscode中会报错

找不到模块“mockjs”或其相应的类型声明。ts(2307)

我是使用pnpm、vite新建的vue3项目，只需要在src目录下的vite-env.d.ts文件下，加入以下配置即可

/// <reference types="vite/client" />

declare module 'mockjs'

main文件下引入mockjs

在main.ts文件下引入mockjs

import './mock/index'

编写模拟接口