Vue2.5怎么通過json文件讀取數(shù)據(jù)

這篇文章主要介紹了Vue2.5怎么通過json文件讀取數(shù)據(jù)的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue2.5怎么通過json文件讀取數(shù)據(jù)文章都會有所收獲，下面我們一起來看看吧。

1.準(zhǔn)備工作

1.1 webpack.dev.conf.js

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

const express = require('express')
const app = express()
var appData = require('../data.json')//加載本地數(shù)據(jù)文件的路徑
var leftMenu = appData.leftMenu //獲取對應(yīng)的本地數(shù)據(jù)
var 數(shù)據(jù)名稱 = 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數(shù)據(jù)，上面配置的數(shù)據(jù)seller就賦值給data請求后調(diào)用
 }),
 app.get('/api/數(shù)據(jù)', (req, res) => {
  res.json({
   errno: 0,
   data: 數(shù)據(jù)（與上面數(shù)據(jù)名稱對應(yīng)）
  })
 })
}

2.在使用的組件里

created(){
  this.$http.get('api/leftmenu').then((response) => {
   console.log(response)
   this.leftMenu = response.body.data  //數(shù)據(jù)位置
  })
} 
data(){
  return{
    leftMenu:[];  
  }
}

關(guān)于“Vue2.5怎么通過json文件讀取數(shù)據(jù)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue2.5怎么通過json文件讀取數(shù)據(jù)”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。