整了一上午，终于成功了。

原来老版本的vue项目中有build文件夹，可以直接修改webpack.dev.conf.js文件即可；

而新版本的vue项目已经没有了，但是可以在vue.config.js中进行配置一些我们需要的配置；

废话不多说，上代码：

首先我的vue版本是：

image.png

第一步：

在public文件夹中创建一个名叫data的文件夹，用来存放我们的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": "机上升舱",
      "list": [{
        "path": "515",
        "name": "头等舱"
      }, {
        "path": "516",
        "name": "超级经济舱"
      }]
    }]
  },
  "status": 1,
  "msg": "\u67e5\u8be2\u6210\u529f"
}

第二步：

在vue项目创建后，在项目的根目录下有一个vue.config.js文件，主要是在里面配置一些代理；

image.png

vue.config.js

module.exports = {
  publicPath: './',
  //在根目录下创建vue.config.js,如下配置：
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:8081', //路径指向本地主机地址及端口号
          ws: true,
          changeOrigin: true,
          pathRewrite:{
            '^/api': '/data' //路径转发代理
          }
        }
      }
  },
}

第三步：

在页面中引入接口：

<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>

贴上页面：

image.png