vue-cli中mock数据

1.老版本的vue-cli

在build/dev-server.js文件中
在const express = require（‘express’)；

//获取更目录下的data.json的数据,并且设置接口
const appData = require('../data.json');
const foods = appData.foods;

app.get('/getFoods',function(req,res){
  res.json({
    code:200,
    message:'success',
    data:foods
  })
});

接下来我们就可以直接通过 本地服务地址+’/getFoods’ 获取数据

2.x版的vue-cli获取假数据

因为版本的更新，新版本的vue-cli中已经没有dev-server.js这个文件了
在build/webpack.dev.conf.js中

const express = require('express');
const app = express();
const Router = express.Router();
const Data = require('../data.json');
const seller = Data.seller;

Router.get('/foods', (req, res, next) => {
  res.json({
    code: 200,
    message: 'success',
    data: seller
  })
});

接着在deserver的before中调用接口。

const devWebpackConfig = merge(baseWebpackConfig, {
    devServer: {
         before(app) {
              app.use('/server', Router);
        },
    }
}

这样就可以通过 本地服务地址+’/server/foods’ 访问数据了
如果直接将 Router.get()写在 before{}中，也是可以直接 本地服务地址+’/foods’访问的，只不过我们是想加前缀’/server‘