vue 模拟a访问_vue之如何模拟后端接口

步骤如下：

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的书写规范，必须严格按照此规范进行，负责会报错

图二