本篇文章主要介紹了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.goodsconst ratings = appData.ratingsconst 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請求后調用   })  }

請求訪問

<script>import header from './components/header/header.vue'const ERR_OK = 0export 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 }}</script>

最后重新啟動項目即可訪問npm run dev

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。