微前端-多项目部署

date

Sep 17, 2023

slug

微前端多项目部署

status

Published

微前端-多项目部署

在项目需要使用 微前端 模式来兼容新旧版本开发工具开发的项目，可以使用 iframe 或其他微前端工具来识别不同路径，加载所需要的项目内容。在我们项目中将多个前端项目部署在同一路径和端口，使用 根目录+不同文件夹名称 来运行不同的项目内容。

下面简单讲下部署配置和过程遇到的问题总结。

一、Ngnix 部署配置

nginx.conf

其中 root 定位资源位置，请按照具体情况修改。

我们需要一种效果，首先在 /opt/homebrew/var/www 下查找匹配请求 URL 的文件，如果没有找到，就查找第一级目录下的 index.html 文件，如果还没有找到，就返回根路径下的 index.html 文件，文件中以下部分内容就是这个作用。

然后我把对应项目编译后的文件，放到指定位置，子项目放同名文件夹下。如下

然后启动 Ngnix 服务器，以为就万事大吉了。

可是万万没想到，跑父项目没问题，http://localhost:8080/ 都可以正常运行，但是一旦将路由指向子项目，http://localhost:8080/sub_project_name 就只有一个子项目的 html 文件可见，无法加载对应的 js 和 css。

二、解决问题

1、资源

按正向理解，子项目的 html 和对应的资源都挂在同一层级，为啥就没办法加载，问题就在于我们 nginx.conf 配置还需要框架打包配置的配合才能生效。nginx.conf try_files 命令能找到 html 文件，但是挂载的资源文件的写法还是根目录资源，所以需要配置打包的 publicPath

vue.config.js

2、路由

同理，路由的跳转也需要对应配置

vue-router@3.x.x (具体版本对应修改写法)

三、总结

当以前没接触过多个项目或者需要配置多路由时，可能这些都没接触过，就会在部署配置时遇到对应的问题，但是一旦理解了，问题其实也很小。