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同级的位置，然后访问路径改成绝对路径，

这是比较笨的方法，目前还没发现比较好的解决方法，欢迎小伙伴前来指教

 

祝工作顺利，身体健康