vue模擬后台數據，請求本地數據的配置（舊版本dev-server.js，新版本webpack.dev.conf.js）

最近學習一個vue-cli的項目，需要與后台進行數據交互，這里使用本地json數據來模仿后台數據交互流程。然而發現build文件夾下沒有dev-server.js文件了，因為新版本的vue-webpack-template 中已經去掉了dev-server.js，取而代之的是webpack.dev.conf.js文件，所以可以在webpack.dev.conf.js里配置本地訪問。

對比舊版本的build文件夾，新版本的build下少了dev-server.js和dev-client.js

 

舊版本

 

新版本

   

新版本配置webpack.dev.conf.js進行本地數據訪問，在const portfinder = require(‘portfinder’)后添加

const express = require('express')
const app = express()   //創建express應用程序
var appData = require('../data.json')//加載本地數據文件
var seller = appData.seller//獲取對應的本地數據
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()  // 獲取一個 express 的路由實例
app.use('/api', apiRoutes)

其中，app.use是express“調用中間件的方法”。所謂“中間件（middleware），就是處理HTTP請求的函數，用來完成各種特定的任務，比如檢查用戶是否登錄、分析數據、以及其他在需要最終將數據發送給用戶之前完成的任務。”。這是阮一峰文章的原話。

簡而言之，app.use() 里面使用的參數，主要是函數。但這個使用，並不是函數調用，而是使能的意思。當用戶在瀏覽器發出請求的時候，這部分函數才會啟用，進行過濾、處理。

（了解express框架請移步express）然后在下面找到devServer,在里面添加

before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      errno: 0,
      data: seller
    })//接口返回json數據，上面配置的數據seller就賦值給data請求后調用
  }),
  app.get('/api/goods', (req, res) => {
    res.json({
      errno: 0,
      data: goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      errno: 0,
      data: ratings
    })
  })
} 

本地data.json數據放在根目錄下與index.js同級,重行執行npm run dev,輸入  localhost:8080/api/seller，結果如下：

已經請求到了本地數據