在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬

npm i -D @lzwme/simple-mock
# or
yarn add -D @lzwme/simple-mock

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)
  );
  }
  });
 }
 }
 }
 }
};

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;
 }
};

@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