vue.js中mock本地json數據

• 新版本的vue項目中已經將dev-server.js，dev-client.js兩個js文件合并到了webpack.dev.conf.js文件中，以下分別是新舊版本的build目錄結構：

• 新版本：
  

• 舊版本：
  

• 本次驗證mock：運用vue的腳手架進行了項目的搭建，想要通過json文件模擬后臺傳輸數據，因為之前dev-server中包含 var app = express()，但是新版本的webpack.dev.conf.js 中并沒有，我們需要express方法定義路由：我們需要添加代碼如下；

//頭部添加 const express = require('express') const app = express()//讀取本地json文件并且定義對應參數 var appData = require('../data'); var seller = appData.seller; var goods = appData.goods; var ratings = appData.ratings;//通過express定義路由對象 var apiRoutes = express.Router()//在devServer中添加具體路由規則以及返回 before(app) {apiRoutes.get('/seller', function (req, res) {res.json({errno: 0,data: seller});});apiRoutes.get('/goods', function (req, res) {res.json({errno: 0,data: goods});});apiRoutes.get('/ratings', function (req, res) {res.json({errno: 0,data: ratings});});app.use('/api', apiRoutes);}

• 如上代碼都需要添加到 webpack.dev.conf.js 文件中，注意路由規則需要添加到 devServer 中，如下圖所有代碼位置：
  

• 啟動項目后，瀏覽器范問：http://localhost:8080/api/goods#/
  

• 補充：

  • 發現從老版本中拷貝過來這句代碼是多余的：

const app = express() - 將以上代碼注釋，并且修改before中的app為任意自定義名稱都是可以通過編譯并且正常運行，如下： before(myRout) {apiRoutes.get('/seller', function (req, res) {res.json({errno: 0,data: seller});}); .....myRout.use('/api', apiRoutes);}

• 具體原因正在探索，還有就是before的作用是什么？？，一定要有這個，還在探索改語法規則

• 補充二：

  • 將before，after修改成beforeEach和afterEach，運行出現如下錯誤：

Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.- configuration has an unknown property 'beforeEach'. These properties are valid:object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, before?, after?, stats?, reporter?, reportTime?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! sell@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the sell@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in: npm ERR! D:\worksoft\nodejs\node_cache\_logs\2021-05-18T02_08_50_682Z-debug.log

• 可以在以上錯誤中看到提示：非法的配置對象，webpack-dev-server 初始化的配置對象中沒有匹配到這個規則beforeEach，這個配置是非法的。

• 并且在一下他列舉出了所有配置對象，我們可以看到其中就有before，after，接下來我需要做的就是搞清楚這些配置對象的意義：

• 繼續補充：查閱資料后在webpack-dev-server 官網中找到了他所有的操作符的說明，類似一個api文檔，在文檔說明如下：

  • devServer.before： 提供了在服務器內部執行自定義中間件的能力。這可用于定義自定義處理程序
  • devServer.after： 提供在服務器內部所有其他中間件之后執行自定義中間件的能力

• 如上官網說明，改api是在服務器內部自定義一段我們的邏輯，after與before只是定義執行的先后順序

• 以上完成vue-cli利用本地json進行數據mock的整個流程

• 初學vue，初涉前端相關知識，打算進階全棧開發，求鼓勵

總結

以上是生活随笔為你收集整理的vue.js中mock本地json数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。