😿微前端架构部署踩坑—以system.js为核心构建的Vue微前端项目在部署时遇到的问题

1,146 阅读1分钟

前段时间因为公司发展的需求,开始尝试涉及微前端领域,在衡量了网上现有的多套方案及自身需求后,选择了基于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

尾声

其实这篇内容是一段时间前写的,现在都开始在构思第二套微前端项目了,只是拖延症。。。。😹