vue-cli项目中用json-sever搭建mock服务器，模拟本地json数据

在使用vue-cli开发项目时，无论后台接口是否开发完成，我们都可以自己使用本地json数据用于模拟，但这些json数据要作为接口开发，json server 作为模拟工具就提供了这样的功能，并且使用十分方便。

前提：已经使用vue-cli搭建好了项目

1、全局安装json-server

npm install json-server -g
或使用
cnpm install json-server -g

2、在项目目录下创建mock文件夹,并在文件夹下创建db.json文件



3、找到package.json文件夹,写入两个命令:

"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"

我这里只写了一个,其实一个两个都可以,写两个直接可以两条命令一起执行

如果执行npm run mockdev 时一直处于监听db.json的状态,建议使用两条命令分开在两个命令行中执行,可避免在一条命令中重复监听db.json。



4、在config/index.js中设置代理:

主要是为了将请求映射到http://localhost:3000

proxyTable: {
'/api/':{
target:'http://localhost:3000',
changeOrigin:true,
pathRewrite:{
'^/api.':''
}
}
}

注意:如果此时你的服务已经开了(已经npm run dev 了),需重新启动服务

在设置代理之前,可以先进行测试,看是否可以启动mock服务器

运行npm run mock 之后访问http://localhost:3000 ,页面中存在json对象并可访问即可





这样我们就实现了项目用npm run dev启动，而json数据使用npm run mock启动（mock服务器用于模拟后台接口请求）

最后：我们就可以使用vue的axios进行数据请求啦

axios({
url:'/api/table',//api 代理到json文件地址，后面的后缀是文件中的对象或者是数组
method:'get',//请求方式
//这里可以添加axios文档中的各种配置
}).then(function (res) {
console.log(res,'成功');
}).catch(function (err) {
console.log(err,'错误');
})