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‘