记iframe+主应用gulp代理转发实现微前端，遇到的一些问题

项目背景

• 主应用gulp搭建
• 多个子应用均使用react框架，webpack4.x搭建。
• 生产环境已使用nginx代理转发实现微前端

实现过程

生产环境用nginx代理，开发环境配置代理即可搭建微前端

gulp实现代理

// gulpfile.js插入以下片段
var webserver = require('gulp-webserver');

gulp.task('webserver', function () {
	gulp.src('./')
		.pipe(webserver({
			proxies: [
				{
					source: '/api',
					target: 'http://localhost:3000',
				}
			]
		}))
})

本地项目里，iframe中 src 地址是 /api 开头的网页全部是A项目里的，A项目webpack启动本地地址是‘http://localhost:3000’，实际使用需根据项目情况修改source和target

可做如下验证

1. 启动主应用及子应用，打开需代理的主应用网页，检查iframe的src，其应当指向子应用的网页，如 api/#/home/name/index

2. 将src根据gulp配置代理的source替换为target，新标签打开网页，应该正常显示（此例中打开http://localhost:3000/#/home/name/index）

此时发现，子应用单独显示正常，在主应用中显示白屏

打开控制台发现报错：

对比localhost:3000发现这里引入的4个静态资源有问题。先在localhost:3000里F12查看正常的静态资源路径

文件都被放在了localhost:3000/static文件夹下，而根据gulp中的代理信息，主应用请求的地址是localhost:3000下的，此时需要更改3000端口下的静态资源路径
publicPath是问题的关键，我在子项目里重写了webpack配置项

output: {
	publicPath: './'
}

具体publicPath及打包目录的内容可参看其他博主的详细介绍
修改完成后，localhost:3000资源目录如下：

此时主应用可正常请求到静态资源

题外的跨域问题，此项目未接触到（micro-app、wujie等微前端框架中需解决）

解决子应用跨域问题，生产环境用nginx转发，开发环境需手动配置，具体操作如下：
修改需要被访问项目的webpack配置

devServer: {
	headers: {
		'Access-Control-Allow-Origin': '*'
	}
}

总结

关键在于协调主应用代理地址与子应用静态资源目录的匹配

我是菜🐕，有问题欢迎斧正