前端学习笔记-8.8mock本地数据

mock本地数据,此处有坑。
其一:
我的方法:(我是vue2.0,算是新版本吧,没有dev.server.js,整合到webpack.dev.conf.js里了)
直接在webpack.dev.conf.js中添加如下:
前端学习笔记-8.8mock本地数据
在devServer中添加如下:
前端学习笔记-8.8mock本地数据
事先要在项目目录下新建data.json:目录如下
前端学习笔记-8.8mock本地数据
data.json数据如下:
{
“seller”: {
“name”: “粥品香坊(回龙观)”,
“description”: “蜂鸟专送”,
“deliveryTime”: 38,
“score”: 4.2,
“serviceScore”: 4.1,
“foodScore”: 4.3,
“rankRate”: 69.2,
“minPrice”: 20,
“deliveryPrice”: 4,
“ratingCount”: 24,
“sellCount”: 90,
“bulletin”: “粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。”,
“supports”: [
{
“type”: 0,
“description”: “在线支付满28减5”
},
{
“type”: 1,
“description”: “VC无限橙果汁全场8折”
},
{
“type”: 2,
“description”: “单人精彩套餐”
},
{
“type”: 3,
“description”: “该商家支持发票,请下单写好发票抬头”
},
{
“type”: 4,
“description”: “已加入“外卖保”计划,食品安全保障”
}
],
“avatar”: “http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg”,
“pics”: [
http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180”,
http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180”,
http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180”,
http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180
],
“infos”: [
“该商家支持发票,请下单写好发票抬头”,
“品类:其他菜系,包子粥店”,
“北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340”,
“营业时间:10:00-20:30”
]
}
}
实现效果图:
前端学习笔记-8.8mock本地数据

其二:
别人vue2.0
在webpack.dev.conf.js中添加如下:
前端学习笔记-8.8mock本地数据
在devServer中添加如下:
前端学习笔记-8.8mock本地数据
data.json数据同上
原博地址:
https://blog.csdn.net/qq_37968920/article/details/81571829

其三:
老版本的
(版本不同,配置不同,请注意)
老版本有dev.server.js直接在里面配置:
前端学习笔记-8.8mock本地数据
前端学习笔记-8.8mock本地数据

推荐看这里:
https://segmentfault.com/q/1010000011988039?sort=created