在 https://www.jb51.net/article/151520.htm這篇文章中，我們介紹了在 Angular-CLI 中引入 simple-mock 的方法。

本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。

本質(zhì)上這里介紹的是在 webpack-dev-server 中配置 simple-mock 實(shí)現(xiàn) API Mock，所以適用于任何采用 webpack 的前端項(xiàng)目。

1 simple-mock 簡介

simple-mock 是一個引入成本簡單的 API Mcok 庫，通過提供 API 方法供 node Server 調(diào)用，以幫助 node Server 實(shí)現(xiàn) Mock 功能。

前端開發(fā)過程中的 API Mock 方案各種各樣，但有時(shí)功能豐富的 mock 方案不一定是最適合當(dāng)前開發(fā)場景的。

simple-mock 以提供 API 方法的方式實(shí)現(xiàn)簡易的 API Mock 邏輯， 注重快速簡潔。

2 在 Vue-CLI 項(xiàng)目中使用 simple-mock

下面以當(dāng)前最新的 Vue-CLI 3 和 vuejs 2 為例，介紹引入 simple-mock 的詳細(xì)流程。

2.1 在 項(xiàng)目中引入 simple-mock 依賴

npm i -D @lzwme/simple-mock

# or

yarn add -D @lzwme/simple-mock

2.2 在配置文件 vue.config.js 中增加代理配置項(xiàng)

在配置文件 vue.config.js 中增加 devServe.proxy 字段的配置。參考：

const anyParse = require("co-body");

const apiMock = require("@lzwme/simple-mock");

const chalk = require("chalk");

const proxyTarget = 'https://api.github.com/';

module.exports = {

baseUrl: "",

// Links: https://webpack.js.org/configuration/dev-server/

devServer: {

open: true,

https: false,

compress: true,

disableHostCheck: true,

// Links: https://github.com/chimurai/http-proxy-middleware

proxy: {

"/users": {

target: proxyTarget,

changeOrigin: true,

port: 3009,

onProxyRes(proxyRes, req, res) {

apiMock.saveApi(req, res, proxyRes.headers["content-encoding"]);

},

async onProxyReq(proxyReq, req, res) {

// 嘗試解碼 post 請求參數(shù)至 req.body

if (!req.body && proxyReq.getHeader("content-type")) {

try {

req.body = await anyParse({ req });

} catch (err) {

// console.log(err);

}

}

apiMock.render(req, res).then(isMocked => {

if (!isMocked) {

console.log(

chalk.cyan("[apiProxy]"),

req._parsedUrl.pathname,

"\t",

chalk.yellow(proxyTarget)

);

}

});

}

}

}

}

};

通過以上兩個步驟，即完成了 simple-mock 的引入。下面步驟主要是針對 simple-mock 使用的說明示例。

2.3 修改 simple-mock 配置文件

simple-mock 可以通過讀取配置文件 simple-mock-config.js 判斷 mock 的開啟或關(guān)閉。該文件會在首次加載時(shí)自動創(chuàng)建。配置內(nèi)容參考：

module.exports = {

mockFileDir: 'mock', // path.contentlove(__dirname, 'mock'), // 指定 mock 文件存放的目錄

isEnableMock: true, // 是否開啟 Mock API 功能

isAutoSaveApi: true, // 是否自動保存遠(yuǎn)端請求的 API

isForceSaveApi: false, // 是否強(qiáng)制保存，否則本地有時(shí)不再保存

// 自動保存 API 返回內(nèi)容時(shí)，對內(nèi)容進(jìn)行過濾的方法，返回為 true 才保存

fnAutosaveFilter(content) {

// 示例： 不保存空的或 404 的內(nèi)容

if (!content || content.message === 'Not Found') {

return false;

}

return true;

}

};

通過修改配置文件中的開關(guān)，即可實(shí)現(xiàn) mock 功能的開啟或關(guān)閉。

2.4 通過環(huán)境變量開啟或關(guān)閉 Mock 功能

除了讀取配置文件， simple-mock 還可以通過讀取環(huán)境變量判斷 mock 的開啟或關(guān)閉(環(huán)境變量的優(yōu)先級更高，方便將開關(guān)注入到工程化工具中)。

例如在 window 下我們可以創(chuàng)建如下的批處理腳本( dev-start.bat )，啟動該腳本即可即時(shí)選擇是否開啟 mock 功能。

dev-start.bat 文件主要內(nèi)容參考：

@title VUE-START-HELPER

@echo off

set NODE_ENV=development

set MOCKAPI_ENABLE=N

set MOCKAPI_AUTOSAVE=N

set MOCKAPI_AUTOSAVE_FORCE=N

set /p enablemock=Enable mockAPI?(y/):

if "%enablemock%"=="y" set MOCKAPI_ENABLE=mock

set /p autosave=Auoto Save API Data?(y/):

if "%autosave%"=="y" set MOCKAPI_AUTOSAVE=save

if "%enablemock%"=="y" goto run

set /p forcesave=Force Save API Data?(y/):

if "%forcesave%"=="y" set MOCKAPI_AUTOSAVE_FORCE=force

:run

echo =======================================================

echo MOCKAPI_ENABLE = %MOCKAPI_ENABLE%

echo MOCKAPI_AUTOSAVE = %MOCKAPI_AUTOSAVE%

echo MOCKAPI_AUTOSAVE_FORCE = %MOCKAPI_AUTOSAVE_FORCE%

echo =======================================================

npm start

dev-start.bat 運(yùn)行示例

自動保存 API 數(shù)據(jù)的文件

3 更多參考

github-user-search-vue是基于 Vue-CLI 3 和 simple-mock 實(shí)現(xiàn)的一個 Github 用戶搜索的示例項(xiàng)目，如有興趣可前往參考。

本文的方案與在 Angular-CLI 中引入 simple-mock 在本質(zhì)上是一樣的，都是在 http-proxy-middleware 執(zhí)行過程中，注入 simple-mock 相關(guān) API 實(shí)現(xiàn) Mock 功能。故本文的示例方法。 Vue-CLI 和 Angular-CLI 的 node Server 內(nèi)部均采用 webpack-dev-server ，它使用 http-proxy-middleware 作為 HTTP 代理插件。故本文示例的方法，實(shí)際適用于任何使用 http-proxy-middleware 作為 HTTP 代理的 node server 服務(wù)。

總結(jié)

以上所述是小編給大家介紹的在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

總結(jié)

以上是生活随笔為你收集整理的mock模拟接口测试 vue_在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。