脚本宝典收集整理的这篇文章主要介绍了vue的Mock数据（一） json-server，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

json-server:
Get a full fake REST API with zero coding in less than 30 seconds(只能通过GET请求获取数据)

安装:
`$ npm install json-server --save-dev`

1.在本地存在一个XX.json文件

2.根据文档配置,将这段代码写入到dev-server.js中,并按照需求修改

    // server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(3000, () => {//端口号需要配置
  console.log('JSON Server is running')
})
这个时候就已经可以根据设置路径在本地指定服务器端口获取到json文件

3.在config文件的index.js中proxyTable 解决开发环境路径问题

API文档:https://vuejs-templates.github.io/webpack/proxy.html

 // config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://localhost:8086',
        changeOrigin: true,//true时可用来解决跨域问题
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

4.现在就可以根据指定路径获取到mock数据了

5.vue-cli的这个设置来自于其使用的插件http-proxy-middleware

github：https://github.com/chimurai/http-proxy-middleware

脚本宝典总结

以上是脚本宝典为你收集整理的vue的Mock数据（一） json-server全部内容，希望文章能够帮你解决vue的Mock数据（一） json-server所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。