Vite+Vue3使用MockJS

最新推荐文章于 2025-04-07 15:10:04 发布

枫叶梨花

最新推荐文章于 2025-04-07 15:10:04 发布

阅读量1k

点赞数 15

CC 4.0 BY-SA版权

分类专栏：真 · 解决问题 · 小知识文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/flash_love/article/details/135329595

本文详细介绍了如何在使用Vue3和Vite框架开发时，通过pnpm管理和安装MockJS库，配置mock模拟接口，以及与axios集成，以便在后端接口未准备好时进行前端开发测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用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'

编写模拟接口

import Mock from 'mockjs'

Mock.mock("/mock/login","post", {code: 200, token:"login success token"});


Mock.mock("/mock/getGoodsList","get", {
    code: 200, 
    message:"请求成功",
    data:[
        {
            id:1,
            introduce:"旺仔牛奶很好喝！！！",
            title:"旺仔牛奶",
            userI

最低0.47元/天解锁文章