内容简介：1.webpack.dev.conf.js配置本地数据访问a.在const portfinder = require('portfinder')之后加：var appData = require('../db.json')//加载本地数据文件（db.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
})
}),
以上所述就是小编给大家介绍的《vue开发 请求本地JSON数据》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
编程珠玑（续）（修订版）
【美】Jon Bentley 乔恩•本特利 / 钱丽艳、刘田 / 人民邮电出版社 / 2015-2 / CNY 35.00
历史上最伟大的计算机科学著作之一 融深邃思想、实战技术与趣味轶事于一炉的奇书 带你真正领略计算机科学之美 多年以来，当程序员们推选出最心爱的计算机图书时，《编程珠玑》总是位于前列。正如自然界里珍珠出自细沙对牡蛎的磨砺，计算机科学大师Jon Bentley以其独有的洞察力和创造力，从磨砺程序员的实际问题中凝结出一篇篇不朽的编程“珠玑”，成为世界计算机界名刊《ACM通讯》历史上最受欢......一起来看看 《编程珠玑（续）（修订版）》 这本书的介绍吧!
