在嘗試做一個前后端分離的個人博客的時候，由于前后端都需要自己完成，所以首先需要把前端頁面寫好，但同時需要調用接口，后端代碼卻還沒有開動，怎么辦呢，所以這時候就需要自己搭建來模擬假數據了。 在以前的實習中曾經用過mock, 覺得還挺不錯，所以決定用 vue 結合 mock來攔截 Ajax 請求，加快博客完成的速度，在參考官網和各類文章后，其開發過程如下所示

安裝依賴

cnpm? install? mockjs --save-dev? 注： 安裝完以后，由于還附帶許多依賴，所以可能還需要執行cnpm install 2.? 建立項目文件結構 3.? ?util.js 中代碼如下 // 引入外部資源 const fs = require('fs') const path = require('path')module.exports = {// 用于被index.js進行調用 getJsonFile (filePath) {// 讀取指定的json文件const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')// 解析并返回return JSON.parse(json)} }

index.js

const Mock = require('mockjs' const util = require('./util')module.exports = function(app) {// 監聽請求app.get('/getArticleList', (rep, res) => {// 響應時，返回 mock data的json數據const articleList = util.getJsonFile('./article-list.json')// 將json傳入 Mock.mock 方法中，生成的數據返回給瀏覽器 res.json(Mock.mock(articleList))}) } 5.? ?json 格式（按自己需要，也可以用mock產生隨機數）

?

修改 webpack 配置

build -> webpack.dev.conf.js -> devServer?? devServer.before: require('../mock') 引入即可

?

在完成以上步驟以后，即可以請求成功啦，然后就可以完美的開始調用接口，用自己的模擬數據啦。

轉載于:https://www.cnblogs.com/canulook/p/9995903.html

總結

以上是生活随笔為你收集整理的在vue-cli中搭建mock服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

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