Vite+Ts 中使用mockjs模拟用户列表数据

最新推荐文章于 2025-03-27 22:40:24 发布

沐澐

最新推荐文章于 2025-03-27 22:40:24 发布

阅读量1.4k

点赞数

分类专栏： typeScript 测试文章标签： vue.js javascript typescript npm mockjs

本文链接：https://blog.youkuaiyun.com/core_song/article/details/127226634

版权

在前端开发过程中，当后端接口未完成时，可以使用MockJS来模拟数据。本文介绍了在Vite+TypeScript项目中如何安装和配置vite-plugin-mock，以及创建mock数据。通过在mock/index.js中定义模拟接口，如模拟10条用户数据，包括随机姓名、日期、签名、邮箱和年龄。在vite.config.json中配置mock路径后，可在项目中通过axios按常规方式调用这些模拟接口，实现页面的数据展示。

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

前端在写页面时，遇到后端接口还没有出来，自己页面又需要模拟数据展示，这时可以使用mockjs生成模拟数据展示。目前在vue项目中最简单快捷的是用vite-plugin-mock

安装mock

npm install mockjs
npm install vite-plugin-mock

配置

根目录新建mock文件夹，以及文件。

mock/index.js文件中模拟后端返回接口

export default [
    {
        url: "/api/userlist",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                'data|10':[{
                    'id|+1':0,
                    username:'@cname',
                    date:'@date(yyyy-MM-dd)',
                    description:'@paragraph',
                    email:'@email()',