json-server和vue-resource聯合在vue-cli項目中獲取本地json數據

一、安裝

　　npm install vue-resource --save

　　npm install json-server --save

二、配置

1、新建一個名為db.json的json文件放在項目的根目錄下，代碼如下：

{
  "getList": [
    {
      "id": 1,
      "msg": "第一條消息"
    },
    {
      "id": 2,
      "msg": "第一條消息"

    },
    {
      "id": 3,
      "msg": "第一條消息"

    },
    {
      "id": 4,
      "msg": "第四條消息"
    }
  ]
}
2.進入項目的build/dev-server.js文件，添加如下代碼：

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

apiServer.use(middlewares)
apiServer.use('/api', apiRouter)
apiServer.listen(port + 1, () => {
  console.log('JSON Server is running')
})
3.打開ｃｏｎｆｉｇ／ｉｎｄｅｘ．ｊｓ，添加如下代碼到proxyTable中：

4.配置與使用vue-resource

　　router/index.js中添加如下代碼：

　　import VueResource from 'vue-resource'

　　Vue.use(VueResource)

三、應用

頁面的export default中寫入如下代碼即可訪問db.json,以下是訪問db.json的getList