【Vue】vuecli mock模拟数据+json-server

最新推荐文章于 2025-05-06 16:06:39 发布

Y__Cheng

最新推荐文章于 2025-05-06 16:06:39 发布

阅读量1.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： web Vue 前（台）端（菜）文章标签： vue mock数据 vue如何使用json-server获取模拟数据 mock数据 Vue中使用json-server vue中使用模拟数据

本文链接：https://blog.csdn.net/qq_33744228/article/details/80785887

前（台）端（菜）同时被 3 个专栏收录

35 篇文章

订阅专栏

web

30 篇文章

订阅专栏

Vue

7 篇文章

订阅专栏

本文介绍如何使用json-server快速搭建模拟数据服务，包括安装配置、启动服务及设置代理等步骤，帮助前端开发者解决接口滞后问题。

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

如果我们的项目利用的是前后端分离的话，前端后台是同时开发的，但是后台接口往往是落后于页面开发的，所以我前端就需要用到模拟的数据来替代后台的接口。

现在有很多的mock数据工具，这里我们讲的是json-server，相对于简单,容易上手。

开始

前提你们肯定应该安装了node了，然后在全局安装json-server

npm install json-server -g

linux/mac版

sudo npm install json-server -g

建立xx.json文件

这里写图片描述

建立好之后，然后打开终端输入

json-server db.json --port 3000 //（端口）

这里可以简化执行，具体操作：
打开package.json文件然后在scripts中配置一个mock：

"mock": "json-server db.json --port 3003"

这里写图片描述
直接执行

npm run mock

然后可以看到
这里写图片描述

这里也可以直接访问 http:/localhost:3000
这里写图片描述

访问json数据

到这里我们已经开启了json-server的mock服务，同时我们在启动一个终端来启动npm run dev服务，这里我们需要保持两个服务都是开启的状态，不然会报error错，应为没开json-serer服务的话，访问不到这个地址。

这里我两个服务都是开启状态，直接在HelloWorld.vue中测试获取数据了
这里写图片描述
到这里我们就可以拿到写好的json数据了：

设置代理服务器

在config/index.js 的proxyTable将请求映射到http://localhost:3000；

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api/': {
        target: 'http://localhost:3000', //将http://localhost:3000映射到/api
        changeOrigin: true,   //是否跨域
        pathRewrite: { 
          '^/api': '',   // 因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'
        }
      }
    },

这时就可以吧前面HelloWordz.vue中的get的url改成：
这里写图片描述
最终拿到数据。。。。。完事大鸡