步骤如下:
1.首先你的项目必须配置了vue-resource,配置成功后我们需要下载json-server
cnpm install json-server --save-dev
2.在build------>webpack.dev.conf.js的任意位置去配置如下代码(代码是参考gitHub里面的json-server编写的,变量名为了避免重复,做过更改):
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(3000, () => {
console.log('JSON Server is running')
})
3.新建一个db.json文件,放在更目录(和index.html同级),里面就是写模拟的后端接口数据的
4.打开config------->index.js,在Dev对象中更改proxyTable配置,更改如下:
proxyTable: {
'/api/':'http://localhost:3000'
},
注意:端口号要和webpack.dev.conf.js保持一致
以上四个步骤完成后就可以运行了,在项目中按照如下图的格式访问:
图一图二是db.json的书写规范,必须严格按照此规范进行,负责会报错
图二
网友评论