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 服务。
总结
以上所述是小编给大家介绍的在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
