Vue-cli 在本地模拟请求数据

写在前面
在我们开发的时候，尤其是前后端分离的项目，接口总是滞后于页面的开发，所以我们需要模拟后台API请求结果。

模拟后台数据请求

第一步：安装插件

npm install vue-resource --save

第二步：读取本地json数据

目前的vue-cli2.0已经放弃dev-server.js，只需在webpack.dev.conf.js配置就行，具体配置如下：
在const portfinder = require('portfinder')后面加上以下代码

const portfinder = require('portfinder')
// 读取本地json数据
const express = require('express')
const app = express()//请求server
var homeData = require('../static/mock/index.json') // 加载本地数据文件
var cityData = require('../static/mock/city.json')//加载本地数据文件
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通过路由请求数据

第三步：进行后台数据模拟

在devServer里面添加

// 进行后台数据模拟
before(app) {
  app.get('/api/home', (req, res) => {
    res.json({
      errno: 0,
      data: homeData
    })
  }),  // 接口返回json数据，上面配置的数据seller就赋值给data请求后调用
  app.get('/api/city', (req, res) => {
    res.json({
      errno: 0,
      data: cityData
    })
  })
}

第四步：查看数据结果

运行npm run dev，在浏览器中打开http://localhost:8080/api/home，可以看到访问结果

获取本地json数据结果

在vue文件中使用axios请求json数据

第一步：安装axios

npm install axios --save // 使用axios发送请求

main.js文件中：

import axios from 'axios'; // 消息请求
Vue.prototype.$http = axios; // 将axios挂载到Vue实例中的$http 上面

第二步：安装vue文件中请求

this.$http.get('./api/home').then((res) => {
  this.content = res.data;
  console.log(this.content);
}).catch((err) => {
  console.log(err);
});

参考资料:
vue-cli的build的文件夹下没有dev-server.js文件，怎么配置mock数据