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