Vue中读取使用本地json数据,及打包后的访问问题
·
vue项目中访问本地json能避免,因服务器原因请求速度很慢很慢,
1.首先建立一个json文件,放到static文件下,要保持是正确的json格式,例如,或者你只有data里面的数据就行,我这是从接口返回的数据直接粘贴过来的

{
"msg": "success",
"code": 0,
"data": {
"activityPrize": [
{
"activityId": 34,
"productId": 1589,
"imagePath": "https://qingdao.aliyuncs.com/commodity/92eca519021d4ff09d12f530a330a03a.jpg",
"numberLimitPrize": -1,
"shortTitle": "四等奖",
"id": 106,
"shopId": 13,
"title": "【中秋聚惠】AKOKO曲奇品鉴大礼包 ",
"type": 2,
"version": 2,
"ratio": 0.1
},
{
"activityId": 34,
"productId": 1588,
"imagePath": "https://qingdao.aliyuncs.com/commodity/92eca519021d4ff09d12f530a330a03a.jpg",
"numberLimitPrize": -1,
"shortTitle": "五等奖",
"id": 107,
"shopId": 13,
"title": "【中秋聚惠】博纳影城电影票 ",
"type": 2,
"version": 2,
"ratio": 0.1
},
{
"activityId": 34,
"productId": 1578,
"imagePath": "https://qingdao.aliyuncs.com/commodity/92eca519021d4ff09d12f530a330a03a.jpg",
"numberLimitPrize": -1,
"shortTitle": "六等奖",
"id": 108,
"shopId": 13,
"title": "【中秋聚惠】满200减-30元服饰类优惠券",
"type": 2,
"version": 0,
"ratio": 0
},
]
}
}
2.像调用接口你数据一样去调用json数据
我这边用的是vue-resource,,你可以根绝自己的方法来定
this.$http.get('/static/data.json',
).then(function(json){
this.prizeList = json.data.data.activityPrize;
console.log(this.prizeList)
},function(res){
alert("请求失败");
})

请求成功
但是build打包后会访问不到本地json数据,我用的方法,是把json数据放到服务器上和index.html同级的位置,然后访问路径改成绝对路径,

这是比较笨的方法,目前还没发现比较好的解决方法,欢迎小伙伴前来指教
祝工作顺利,身体健康
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐



所有评论(0)