整了一上午吨拗，終于成功了。

原來(lái)老版本的vue項(xiàng)目中有build文件夾婿斥，可以直接修改webpack.dev.conf.js文件即可劝篷；

而新版本的vue項(xiàng)目已經(jīng)沒(méi)有了，但是可以在vue.config.js中進(jìn)行配置一些我們需要的配置民宿；

廢話不多說(shuō)娇妓，上代碼：

首先我的vue版本是：

image.png

第一步：

在public文件夾中創(chuàng)建一個(gè)名叫data的文件夾，用來(lái)存放我們的json文件：

image.png

home.json

{
  "data": {
    "skuDetailList": [
      {
      "id": "350",
      "goods_id": "514",
      "goods_img": "https:\/\/oem.mobzhifu.com\/Uploads\/Picture\/Goods\/2018-10-26\/5bd2c69e6f2bf.png",
      "sku": "\u7ea2\u8272,\u751c",
      "sku_res": "515",
      "online_price": "25.00",
      "num": "136",
      "shop_mem_price": 0
    }, {
      "id": "351",
      "goods_id": "514",
      "goods_img": "https:\/\/oem.mobzhifu.com\/Uploads\/Picture\/Goods\/2018-10-26\/5bd2cb4bacb3a.png",
      "sku": "\u7eff\u8272,\u5fae\u8fa3",
      "sku_res": "516",
      "online_price": "26.00",
      "num": "137",
      "shop_mem_price": 0
    }],
    "skuList":
    [{
      "name": "機(jī)上升艙",
      "list": [{
        "path": "515",
        "name": "頭等艙"
      }, {
        "path": "516",
        "name": "超級(jí)經(jīng)濟(jì)艙"
      }]
    }]
  },
  "status": 1,
  "msg": "\u67e5\u8be2\u6210\u529f"
}

第二步：

在vue項(xiàng)目創(chuàng)建后活鹰，在項(xiàng)目的根目錄下有一個(gè)vue.config.js文件哈恰，主要是在里面配置一些代理只估；

image.png

vue.config.js

module.exports = {
  publicPath: './',
  //在根目錄下創(chuàng)建vue.config.js,如下配置：
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:8081', //路徑指向本地主機(jī)地址及端口號(hào)
          ws: true,
          changeOrigin: true,
          pathRewrite:{
            '^/api': '/data' //路徑轉(zhuǎn)發(fā)代理
          }
        }
      }
  },
}

第三步：

在頁(yè)面中引入接口：

<template>
    <div class="containers">
        <div class="child-div" v-for="(item,index) in goodsList" :key="index">
            <div>id: {{item.id}}</div>
            <div>goods_id: {{item.goods_id}}</div>
            <div>sku: {{item.sku}}</div>
            <img :src="item.goods_img" alt="">
        </div>
    </div>
 
</template>
 
<script>
    export default {
        name: "index",
        data() {
          return {
              goodsList: []
          }
        },
        created: function() {
            this.axios.get('/api/home.json').then((res) => {
                console.log(res)
                this.goodsList = res.data.data.skuDetailList
                console.log(this.goodsList)
            }, function(err) {
                console.log(err)
            })
        }
    }
</script>
 
<style lang="scss" scoped>
.containers{
 
    .child-div {
 
    }
}
</style>

貼上頁(yè)面：

image.png