前段时间因为公司发展的需求，开始尝试涉及微前端领域，在衡量了网上现有的多套方案及自身需求后，选择了基于system.js 手工打造微前端架构， 其实整个开发过程还是挺顺利的，没有遇到头秃的大坑， 直到我准备部署。。。
整个部署过程中，出现的各种问题，往往关键点在于忘记了在执行加载子项目文件时。此时项目处在"客户端运行时"
踩坑过程
因为子项目是在项目运行时，根据用户的操作而进行加载， 此时项目已是打包后运行在浏览器里的结构，system.import路径是没法使用项目在打包前的相对路径的
因此我又想到，直接通过域名然后加上子项目的包存放路径来进行加载，却不断返回 undefind < ，查询文档及source，发现这个加载路径返回的是html文件，而翻过文档后system.import只能加载js文件，此时我怀疑是因为Nginx做了配置，凡是这个域名访问，无论完整路径是什么，一律返回包入口index.html。
此时，我已经无限接近真相， 但我竟然关注了奇怪的点，开始走向误区。
然后我又和运维商量，在服务器上部署docker环境，找个地方专门存放子项目的包，然后监听另一个端口，返回对应的包，接着运维给了我服务的私网ip地址，而此时我却不断尝试加载，然后失败error loading（开始给自己挖第一个坑）
反复尝试，修改具体路径，依然加载不到，头秃，开始怀疑人生，甚至连127.0.0.1 及 localhost 都试了，都是error loading， 甚至让运维开了公网ip(不要学我，逼急了，想找出问题在哪)，通过ip+端口的形式进行加载， 这回倒不是error loading了， 而是跨域。。。。（看似简单一段话，实则在这第二个坑里躺了一天）
最终方案
项目路由模式改为history，nginx做好对应路径配置，加载时直接system.import(https:www.a.com/package/firstdemo/main.js)既不会有不同环境的ip问题，也不会有不同端口的跨域问题
在部署过程中，运维及其nginx配置非常重要，一定要跟运维多沟通，微前端的部署模式与常规项目部署差异很大
总结几种坑的形式
域名 + 路径， 因为nginx的转发配置， 导致加载到的是html文件， 失败
域名 + 端口 + 路径， 因为端口问题，导致跨域
公网ip + 端口 + 路径， 跨域
服务端的私网ip + 端口 + 路径， 在遇到跨域之前，你已经先失败了，因为压根访问不到私网ip
尾声
其实这篇内容是一段时间前写的，现在都开始在构思第二套微前端项目了，只是拖延症。。。。😹
