前端架构：并列微前端m-saas-pc/m-snow-pc/ 对比Qiankun微前端、模块联邦的优劣势 / 完全隔离 / 推荐使用

一、并列微前端实现原理

1.1、本地开发

本地开发不存在跨域问题，cookie信息也是可以通信的，通过端口指定项目，没有障碍

1.2、服务端部署

通过Nginx路由到各项目的静态文件，利用哈希路由实现前端路由分发

1.3、通用代码 可使用git modules

git：git modules_.gitmodules-CSDN博客

1.4、核心

处理好跨域问题，处理好指定资源的问题

1.5、优势

无需基座，没有主从，无技术栈限制，唯一做到完全隔离，值得推荐

二、服务器部署与Nginx配置

2.1. 部署步骤

2.1.1、项目结构

/var/www/
├── m-saas-pc/    # 微前端项目1
├── m-snow-pc/    # 微前端项目2

2.1.2、依赖安装与构建

# 进入项目目录安装依赖（使用pnpm）
cd /var/www/m-saas-pc && pnpm install
cd /var/www/m-snow-pc && pnpm install

# 构建项目
cd /var/www/m-saas-pc && pnpm build
cd /var/www/m-snow-pc && pnpm build

2.2、 Nginx配置

由于两个项目使用哈希路由（#/items/date），Nginx只需将请求路由到对应项目的静态文件，无需处理前端路由

server {
    listen 80;
    server_name www.snow.com;  # 替换为你的域名

    # m-saas-pc 项目路由
    location /m-saas-pc/ {
        alias /var/www/m-saas-pc/dist/;  # 指向构建后的静态文件目录
        try_files $uri $uri/ /m-saas-pc/index.html;  # 哈希路由回退
        index index.html;
    }

    # m-snow-pc 项目路由
    location /m-snow-pc/ {
        alias /var/www/m-snow-pc/dist/;
        try_files $uri $uri/ /m-snow-pc/index.html;
        index index.html;
    }

    # 可选：静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public";
    }
}

2.3、关键点说明

哈希路由处理：通过try_files将未匹配的路径回退到index.html，由前端路由（Vue Router）处理哈希部分（#/items/date）。

静态资源优化：对JS、CSS等静态资源设置缓存，提升加载速度。

HTTPS推荐：使用Let's Encrypt免费证书启用HTTPS：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d www.snow.com

三、并列微前端方案的优势

3.1、技术栈解耦

独立开发：m-saas-pc和m-snow-pc可独立选择技术栈（如Vue3、React等），互不干扰。

版本隔离：每个项目可独立升级依赖（如Vue3、TypeScript版本），避免兼容性问题。

3.2、团队并行开发

分工明确：不同团队可同时开发两个项目，无需协调主应用与子应用的集成。

敏捷迭代：项目可独立发布、回滚，降低整体风险。

3.3、动态加载与按需渲染

资源优化：仅加载当前访问项目的JS/CSS，减少初始加载时间。

性能提升：哈希路由无需服务器参与，切换项目时仅更新部分DOM。

3.4、独立部署与扩展性

灵活部署：每个项目可独立部署到不同服务器或CDN，适应高并发场景。

横向扩展：新增微前端项目（如m-third-pc）时，仅需添加Nginx路由规则，无需修改现有代码。

3.5、故障隔离

容错性强：一个项目崩溃不影响其他项目运行，提升系统稳定性。

监控独立：可针对每个项目单独配置日志、性能监控（如Sentry）。

四、对比传统单体架构优缺点

五、并列微前端对比 Qiankun微前端 对比 模块联邦

六、适用场景

中大型项目：需要多个团队协作开发，且技术栈多样。

高并发系统：需独立扩展某个功能模块（如电商的商品页、订单页）。

遗留系统改造：逐步将单体应用拆分为微前端，降低风险。

七、欢迎交流指正

部署方案：通过Nginx路由到各项目的静态文件，利用哈希路由实现前端路由分发。

优势：技术栈解耦、团队并行开发、动态加载、独立部署与故障隔离。

推荐：适合需要高灵活性、可扩展性的中大型项目，尤其当团队规模较大或技术栈多样时。

通过此方案，您可以高效部署并列的微前端项目，并充分利用其架构优势提升开发效率和系统稳定性。

八、推荐链接

微前端-qiankun：vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用_qiankun.js-CSDN博客