vue提取json_在Vue2.5中通过json文件读取数据的方法

本文通过实例代码给大家详细介绍了Vue2.5通过json文件读取数据的方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧

1.准备工作

1.1 webpack.dev.conf.js

在 const portfinder = require(‘portfinder')的下面加上以下代码

const express = require('express')

const app = express()

var appData = require('../data.json')//加载本地数据文件的路径

var leftMenu = appData.leftMenu //获取对应的本地数据

var 数据名称 = appData.选择项

var apiRoutes = express.Router()

app.use('/api', apiRoutes)

找到devServer，在里面加入一下代码

before(app) {

app.get('/api/leftmenu', (req, res) => {

res.json({

errno: 0,

data: leftMenu

})//接口返回json数据，上面配置的数据seller就赋值给data请求后调用

}),

app.get('/api/数据', (req, res) => {

res.json({

errno: 0,

data: 数据(与上面数据名称对应)

})

})

}

2.在使用的组件里

created(){

this.$http.get('api/leftmenu').then((response) => {

console.log(response)

this.leftMenu = response.body.data //数据位置

})

}

data(){

return{

leftMenu:[];

}

}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：