如何可以支持API代理

[OxPatient]

如题：如何设置api代理，在组件演示时，有场景会需要加载远程数据。

尝试直接设置onCreateWebpackChain/modifyBundlerConfig，尝试使用docz createPlugin设置onCreateWebpackChain、onCreateApp、modifyBundlerConfig都没有成功

救教大神！！！

另：依赖docz版本似乎不是最新版本

[AimLuo]

docz版本官方已经放弃维护，使用过程中有很多bug，官方正在全力开发father-doc，，
如果要演示组件，可以另外开umi来调试，可以参考我现在的方案：
查看两个pages目录

注意：

umi引入less时，默认使用css module scoped，而umi-father打包时，默认是不使用css module scoped，所以我的解决方案是使用:global包裹样式：

:global{
  .foo{
    color: red
  }
}

引入：

import styles from './index.less'
<div classname={styles.foo} />

原谅我没找到在哪配置

根目录pages预览页面

1. 这个页面使用umi开发，打包之后会和文档页面部署到同一个位置，文档中会有连接跳转到这里体验组件的完整功能
2. 这里引入的是已经开发完成打包好的组件
3. 这个页面是为了补充docz的不足，比如通常的布局组件，以及你这里需要的api代理这种更高级的功能

/packages/components/pages组件开发页面

1. 这里引入的是开发时的组件，协助开发者开发，补充docz的不足

[OxPatient]

自己解决了，感谢@AimLuo

`const plugin = createPlugin({
onPreCreateApp: (app) => {
var proxy = require('http-proxy-middleware');

	app.use(
		'/api',
		proxy({
			target: 'http://10.219.220.11:8001/api',
			pathRewrite: { '^/api': '' },
			changeOrigin: true,
			bypass: (req, res, opts) => {
				console.log(req, res, opts);
			}
		})
	);
}

});`

[zhangfu-git]

@OxPatient 你这段代码是写哪里的？

[Harry-wyg]

@OxPatient 同问，这段代码是在doc配置里的还是单独启用了服务

[zhaoyu69]

@zhangfu-git @Harry-wyg 写在.fatherrc.js文件里

import { createPlugin } from "docz-core";
import proxy from "http-proxy-middleware";

const proxyPlugin = () => createPlugin({
  onCreateApp: (app) => {
    app.use(
        "/api",
        proxy({
          "target": "http://xxxxxxx",
          "changeOrigin": true,
          "pathRewrite": { "^/api" : "" }
        })
    );
  }
});

export default {
  doc: {
    plugins: [
      proxyPlugin(),
    ],
  }
}

[PeachScript]

推荐使用 dumi + father-build 进行组件库研发：https://d.umijs.org/guide/getting-started
dumi 基于 Umi 打造，API 代理可以轻松实现：https://umijs.org/zh-CN/config#proxy