1. 程式人生 > >Vue最新版本修改dev-server.js模擬後臺資料請求,配置express

Vue最新版本修改dev-server.js模擬後臺資料請求,配置express

參照了別人寫的記錄一下
最新的vue裡dev-server.js被替換成了webpack-dev-conf.js
因此我們需要找到webpack-dev-conf.js檔案進行修改
在模擬後臺資料的時候直接在webpack-dev-conf.js檔案中修改
第一步,在const portfinder = require(‘portfinder’)後新增

//第一步
const express = require('express')
const app = express()//請求server
var appData = require('../src/data/homeData.json'
)//載入本地資料檔案 var seller = appData.seller//獲取對應的本地資料 var goods = appData.goods var ratings = appData.ratings var apiRoutes = express.Router() app.use('/api', apiRoutes)//通過路由請求資料

此資訊在哪裡新增呢,請看圖:
在這裡插入圖片描述
第二步:在webpack-dev-conf.js檔案ctrl+F鍵找到devServer,在裡面加上before()方法

 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檔案在外層增加一個seller
請看圖:
在這裡插入圖片描述
第四步在src資料夾下找到main.js檔案進行匯入
請看圖:
在這裡插入圖片描述
第五步,在檔案中使用get請求資料
請看圖:
在這裡插入圖片描述
最後一步謹記: 需要ctrl+c停止伺服器,然後重新執行npm run dev 指令,否則會報錯
博文為isMrcat個人原創,轉載請註明出處