VUE开发请求本地数据的配置.webpack.dev.conf.js

1.webpack.dev.conf.js配置本地数据访问

a.在const portfinder = require('portfinder')之后加：

var appData = require('../db.json')//加载本地数据文件（db.json）
var getNewsList = appData.getNewsList//获取对应的本地数据
var login = appData.login
var getPrice = appData.getPrice
var createOrder = appData.createOrder

找到devServer{}在里面添加：

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

db.json文件目录及内容：

{
  "getNewsList": [
    {
      "id": 1,
      "title": "新闻条目1新闻条目1新闻条目1新闻条目1",
      "url": "http://starcraft.com"
    },
    {
      "id": 2,
      "title": "新闻条目2新闻条目2新闻条目2新闻条目2",
      "url": "http://warcraft.com"
    },
    {
      "id": 3,
      "title": "新闻条3新闻条3新闻条3",
      "url": "http://overwatch.com"
    },
    {
      "id": 4,
      "title": "新闻条4广告发布",
      "url": "http://hearstone.com"
    }
  ],
  "login": {
    "username": "yudongdong",
    "userId": 123123
  },
  "getPrice": {
    "amount": 678
  },
  "createOrder": {
    "orderId": "6djk979"
  },
  "getOrderList": {
    "list": [
      {
        "orderId": "ddj123",
        "product": "数据统计",
        "version": "高级版",
        "period": "1年",
        "buyNum": 2,
        "date": "2016-10-10",
        "amount": "500元"
      },
      {
        "orderId": "yuj583",
        "product": "流量分析",
        "version": "户外版",
        "period": "3个月",
        "buyNum": 1,
        "date": "2016-5-2",
        "amount": "2200元"
      },
      {
        "orderId": "pmd201",
        "product": "广告发布",
        "version": "商铺版",
        "period": "3年",
        "buyNum": 12,
        "date": "2016-8-3",
        "amount": "7890元"
      }
    ]
  }
}

2.组件里面：

created: function(){
  this.$http.get('api/getNewsList')
    .then((res) => {
      this.newsList = res.data.data
      console.log(res.data)
      console.log(res.data.data)
      console.log(this.newsList)
    }, (err) => {
      console.log(err)
    })
}

重新启动：npm run dev  

注意：

res.data 返回的是一个对象，res.data.data返回的是一个数组
（我当时这里在页面就是不出来数据，之后..........纠结了好久才知道要这样的）

post请求：

app.post('/api/getNewsList', (req, res) => {
  res.json({
    data: getNewsList
  })
}),

参考：VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js

不对之处，望指正