Vue2.0 spa 项目中mock数据

现在都在强调前后端分离，所以开发过程中，可以准备好一些json数据，
开启个web本地服务，利用nodejs的express模块，做临时的接口提供数据。
最近学习使用vue-cli构建vue2.0 spa项目中，发现网上vue1.0中mock数
据的方法不能用了，主要是webpack一些配置文件发生改变，所以再此记录下做法

• 我是通过学习滴滴大神黄轶提供的模仿饿了么项目来学习vue构建spa项目的，所以以饿了么数据举例(在此特别感谢大神们的技术分享，帮忙宣传性下他的课程吧 👉 传送门)

需求：提供三个接口

• 获取商家信息：http:xxxx/api/seller
• 获取商家商品数据：http:xxxx/api/goods
• 获取商家评价信息：http:xxxx/api/ratings

1. 准备好数据源，也就是假数据文件“data.json”，这里提供一份示例 饿了么商家信息数据，放到指定目录，我这里直接放到根目录（跟index.html同个目录）

2. 在build目录中找到webpack开发配置文件"webpack.dev.conf.js"，随便找个空白位置，添加以下代码

// mock数据
// 加载express
const express = require('express');
const app = express();
const Router = express.Router();

// 加载数据源数据
const Data = require('../data.json'); // 假数据文件相对路径
const seller = Data.seller;
const goods = Data.goods;
const ratings = Data.ratings;

// 配置获取商家信息接口
Router.get('/seller', (req, res, next) => {
  res.json({
    code: 200,
    message: 'success',
    data: seller
  })
});

// 配置获取商品信息接口
Router.get('/goods', (req, res, next) => {
  res.json({
    code: 200,
    message: 'success',
    data: goods
  })
});

// 配置获取评论接口
Router.get('/ratings', (req, res, next) => {
  res.json({
    code: 200,
    message: 'success',
    data: ratings
  })
});

3. 找到devServer的设置，在最后添加一项配置

before(app) {
      app.use('/api', Router);
}

如下:

WX20180802-175409.png

4. 启动devServer本地服务，直接再终端中运行npm命令就可以了

npm run dev

5. 因为是get请求，直接在浏览器中输入完整地址，如果能看到json数据就成功了！(我这里自己改过devServer的ip地址，如果你没改过就是默认127.0.0.1)

WX20180802-175409.png

最后提供完整配置文件：webpack.dev.conf.js