Vue 使用 json-server 快速模拟后台接口

新版 Vue-cli 脚手架和旧版不同

新版脚手架在 build -> webpack.dev.conf.js 中配置

const jsonServer = require('json-server')

const apiServer = jsonServer.create()

const apiRouter = jsonServer.router('db.json')

//db.json 需要与 index.html 同级

const middlewares = jsonServer.defaults()

apiServer.use(middlewares)

apiServer.use('/api', apiRouter)

//代理到/apii 的所有访问下

apiServer.listen(8079, () =>{
console.log('JSON Server is running')
})

然后在 config -> index.js 中

dev : proxyTable: 中增加路径 '/api/':'http://localhost:8079'

然后就可以访问
http://localhost:8079 确实 json-server 是否开启成功

根据 db.json 中的配置 去 vue 监听的端口访问对应的 json 数据去看是否能够查询到。

JSON-SERVER post 方法请求的.json 对象数据中需要携带 id(很奇怪)