Vue中读取使用本地json数据,及打包后的访问问题
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/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同级的位置,然后访问路径改成绝对路径,
这是比较笨的方法,目前还没发现比较好的解决方法,欢迎小伙伴前来指教
祝工作顺利,身体健康
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
3 个月前
8c391e04
6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)