vue開發 請求本地JSON數據

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

})}),