Vue 在项目中引入本地Json数据

模拟的Json数据放入项目的根目录中。

在build文件夹中，找到 webpack.dev.conf.js ,我们需要在这个js文件中配置Json

在它后面加上配置数据就OK 

//第一步 const portfinder = require('portfinder'),在后面加上
const express = require('express');
const app = express();//请求server
const appData = require('../data.json');//加载本地数据文件

const goodsList = appData.goodsList;//获取对应的本地数据

const apiRoutes = express.Router();
app.use('/api', apiRoutes);//通过路由请求数据

 //第二步找到devServer,在里面添加
    before(app) {

      app.get('/api/goodsList', (req, res) => {
        res.json({
          errno: 0,
          data: goodsList
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
      })

    }

引入成功了的话，可以尝试加载数据，Vue-cli 默认是8080端口，我这里是修改了，根据自己的进行修改

下面将介绍如何在项目中展示Json 数据

 /*请求Json数据*/
  const ERR_OK = 0;

  export default {
      data() {
        return {
          goodsList:[]
        }
      },
      created() {
        this.$http.get('/api/goodsList').then((response) => {
          response = response.body;
          if (response.errno === ERR_OK) {
            this.goodsList = response.data;
          }
        });
      }
  }

在 template 中，我们可以这样去加载数据

<li class="goods-item" v-for="goodsTab in goodsList" >{{goodsTab.name}}</li>