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