配置proxyTable，将mock请求地址指向本地，本地模拟Mock数据

最新推荐文章于 2023-05-10 16:36:44 发布

Little_Pig_Bug

最新推荐文章于 2023-05-10 16:36:44 发布

阅读量4.4k

点赞数 1

分类专栏： vue 文章标签： mock proxyTable配置 vue 地址指向

本文链接：https://blog.csdn.net/Little_Pig_Bug/article/details/81670984

版权

本文介绍如何在Vue项目中配置Mock环境，通过proxyTable将Mock请求指向本地JSON文件，以便模拟数据。首先在项目根目录创建mock文件夹，放置JSON文件并创建server.js映射接口路径。接着在src/api下新建public.js封装请求，设置axios的基础URL。在index.js中定义API接口，与server.js中的路由对应。最后更新package.json的scripts启动mock服务。通过config/index.js的proxyTable配置，使请求地址指向http://localhost:8081/mock/。

摘要由CSDN通过智能技术生成

之前模拟数据，一直是在本地新建json文件，然后将请求的地址指向本地的json路径，但是这样往往不能模拟Post的请求方式，再加上现在的项目都是vue的，就想到了使用Mock，但是中间环境的配置，让我苦恼了好久，记录下来，以防以后自己又忘记了！
下面的都是以Vue项目为例讲解。。。。。

配置Mock环境

1.在项目的根目录下新建mock文件夹，将我的本地的testApi的json文件放在下面(这里我就没有用Mock模拟数据，而是用mock指向我本地的json文件)，然后在mock根目录下新建server.js文件，此文件会将本地的json文件路径映射到mock定义的路径下，然后定义端口号取监听他的新的url，这里我们要安装koa,koa-router模块,实例代码如下：

var app = require('koa')()
var router = require('koa-router')()

router.get('/', function *(next) {
  this.body = '已进入mock环境!'
});

var leftMenu = require('./testApi/leftMenu.json')
router.get('/mock/leftMenu', function *(next) {
  this.body = leftMenu
});
var leftMenu = require('./testApi/leftMenu.json')
router.get('/mock/leftMenu', function *(next) {