在 Vue-CLI 中引入 simple-mock 快速實現簡易的 API Mock 介面資料模擬
在 ofollow,noindex" target="_blank">https://lzw.me/a/angular-cli-simple-mock.html 這篇文章中，我們介紹了在 Angular-CLI 中引入 simple-mock 的方法。
本文以 Vue-CLI 為例介紹引入 simple-mock 實現前端開發資料模擬的步驟。
本質上這裡介紹的是在 webpack-dev-server 中配置 simple-mock 實現 API Mock，所以適用於任何採用 webpack 的前端專案。
1 simple-mock 簡介
simple-mock 是一個引入成本簡單的 API Mcok 庫，通過提供 API 方法供 node Server 呼叫，以幫助 node Server 實現 Mock 功能。
前端開發過程中的 API Mock 方案各種各樣，但有時功能豐富的 mock 方案不一定是最適合當前開發場景的。
simple-mock 以提供 API 方法的方式實現簡易的 API Mock 邏輯， 注重快速簡潔。
2 在 Vue-CLI 專案中使用 simple-mock
下面以當前最新的 Vue-CLI 3 和 vuejs 2 為例，介紹引入 simple-mock 的詳細流程。
2.1 在 專案中引入 simple-mock 依賴
npm i -D @lzwme/simple-mock # or yarn add -D @lzwme/simple-mock
2.2 在配置檔案 vue.config.js 中增加代理配置項
在配置檔案 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 請求引數至 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 的開啟或關閉。該檔案會在首次載入時自動建立。配置內容參考：
module.exports = {
mockFileDir: 'mock', // path.contentlove(__dirname, 'mock'), // 指定 mock 檔案存放的目錄
isEnableMock: true, // 是否開啟 Mock API 功能
isAutoSaveApi: true, // 是否自動儲存遠端請求的 API
isForceSaveApi: false, // 是否強制儲存，否則本地有時不再儲存
// 自動儲存 API 返回內容時，對內容進行過濾的方法，返回為 true 才儲存
fnAutosaveFilter(content) {
// 示例： 不儲存空的或 404 的內容
if (!content || content.message === 'Not Found') {
return false;
}
return true;
}
};
通過修改配置檔案中的開關，即可實現 mock 功能的開啟或關閉。
2.4 通過環境變數開啟或關閉 Mock 功能
除了讀取配置檔案， simple-mock 還可以通過讀取環境變數判斷 mock 的開啟或關閉（環境變數的優先順序更高，方便將開關注入到工程化工具中）。
例如在 window 下我們可以建立如下的批處理指令碼( dev-start.bat )，啟動該指令碼即可即時選擇是否開啟 mock 功能。
dev-start.bat 檔案主要內容參考：
@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 執行示例
自動儲存 API 資料的檔案
3 更多參考
github-user-search-vue 是基於 Vue-CLI 3 和 simple-mock 實現的一個 Github 使用者搜尋的示例專案，如有興趣可前往參考。
本文的方案與在 Angular-CLI 中引入 simple-mock 在本質上是一樣的，都是在 http-proxy-middleware 執行過程中，注入 simple-mock 相關 API 實現 Mock 功能。故本文的示例方法。 Vue-CLI 和 Angular-CLI 的 node Server 內部均採用 webpack-dev-server ，它使用 http-proxy-middleware 作為 HTTP 代理外掛。故本文示例的方法，實際適用於任何使用 http-proxy-middleware 作為 HTTP 代理的 node server 服務。