首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

利用webpack搭建mock API服务

2018年11月05日 发布 阅读(1239) 作者:懒炖

利用webpack实现mock api,需要用到插件webpack-api-mocker

项目目录结构

安装

  1. npm install webpack-api-mocker --save-dev

build/webpack.dev.conf.js中引入webpack-api-mocker

  1. const apiMocker = require('webpack-api-mocker');

devServer参数中设置before,我们把api接口定义在mock目录下的proxy

  1. ...
  2. devServer: {
  3. // 内容路径
  4. contentBase: path.join(__dirname, "../src"),
  5. // gzip压缩
  6. compress: true,
  7. // 端口
  8. port: 9000,
  9. historyApiFallback: true,// 如果为 true ,页面出错不会弹出 404 页面
  10. // api mocker
  11. before(app) {
  12. apiMocker(app, path.resolve(__dirname, "../mock/proxy"))
  13. }
  14. },
  15. ...

注意: apiMocker第二个参数,必须是字符串路径,即上面path.resolve(__dirname, "../mock/proxy")这一串

附: proxy代码,我们可以把不同的API通过文件拆开来

利用_proxy参数,可以代理相关的请求接口。如我们本地开发,但数据需要真实环境的数据,这个真实环境可能是测试服务器,可能是后台开发自己的电脑,这对真实场景的调试是非常有用的

貌似_proxy的代理优先级不生效,所以这里通过环境变量process.env.proxy设置不同的proxy配置

mock/proxy.js

  1. const USER = require("./user");
  2. const _proxy = process.env.proxy == "true";
  3. console.log(_proxy);
  4. let proxy = {};
  5. if (_proxy) {
  6. proxy = {
  7. /**
  8. * 代理远程服务器联调
  9. */
  10. _proxy: {
  11. proxy: {
  12. // "/repos/*": "https://api.github.com/",
  13. // "/:owner/:repo/raw/:ref/*": "http://127.0.0.1:2018"
  14. "/weixin/*": "http://172.20.21.21:8086/"
  15. },
  16. changeHost: true
  17. }
  18. };
  19. } else {
  20. proxy = {
  21. /**
  22. * 用户相关api
  23. */
  24. ...USER
  25. };
  26. }
  27. module.exports = proxy;

mock/user.js

  1. const USER = {
  2. 'GET /weixin/user': { id: 1, username: 'kenny', sex: 6 }
  3. }
  4. module.exports = USER;

修改package.json,定义dev,proxy

本地开发,启用npm run dev
需要测试真实数据时,启用npm run proxy

  1. "scripts": {
  2. "dev": "cross-env proxy=false webpack-dev-server --hot --color --config build/webpack.dev.conf.js",
  3. "proxy": "cross-env proxy=true webpack-dev-server --hot --color --config build/webpack.dev.conf.js",
  4. "build": "webpack --config build/webpack.prod.conf.js",
  5. "server": "http-server ./dist -a 127.0.0.1 -p 9000 --proxy http://172.88.88.21:8086/"
  6. },

执行npm run dev把项目跑起来,测试下api是否成功

测试成功如下图

参考:

webpack devServer/before : https://webpack.docschina.org/configuration/dev-server/#devserver-before

webpack-api-mocker: https://www.npmjs.com/package/webpack-api-mocker

找一个mock缩略图发现一组很有意思的图片:


版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •