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