html请求本地vue,vue配置请求本地json数据的方法

本篇文章主要介绍了vue配置请求本地json数据的方法，分享给大家，具体如下：

在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require('portfinder')后添加

const express = require('express')

const app = express()

const appData = require('../data.json') // 加载本地json文件

const seller = appData.seller // 获取对应本地数据

const goods = appData.goods

const ratings = appData.ratings

const apiRoutes = express.Router()

app.use('/api',apiRoutes)

然后找到devServer，插入以下代码：

//然后找到devSeerver，在里面添加

before (app) {

app.get('/api/seller',(reg,res) => {

res.json({

errno: 0,

data: seller

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

}),

app.get('/api/goods',(reg,res) => {

res.json({

errno: 0,

data: goods

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

}),

app.get('/api/ratings',(reg,res) => {

res.json({

errno: 0,

data: ratings

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

})

}

请求访问

import header from './components/header/header.vue'

const ERR_OK = 0

export default {

data () {

return {

seller: {}

}

},

created () {

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

response = response.body; // 获取到数据

if (response.errno === ERR_OK) {

this.seller = response.data;

console.log(this.seller);

}

})

},

components: {

'v-header': header

}

}

最后重新启动项目即可访问npm run dev

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。