【源码】基于 Docker 和 Vue 的 qiankun 微前端本地调试环境

项目简介

本项目旨在解决前端同学本地配置微前端调试环境困难的问题。公司搭建统一管理后台系统，需用微前端技术集成各业务侧管理页面。借助 Docker 搭建本地微前端调试环境，采用 qiankun 框架，集成一个用 Vue2 基于 webpack 构建的主项目和两个分别基于 webpack 和 vite 构建的 Vue2 子项目，方便前端本地调试。

项目的主要特性和功能

1. 本地环境搭建便捷：利用 Docker 快速搭建本地微前端调试环境，无需复杂的服务端 nginx 配置。
2. 多技术栈支持：主项目和子项目采用 Vue2 技术栈，子项目分别用 webpack 和 vite 构建，适应不同开发需求。
3. 可扩展性强：支持新增子项目，添加 nginx 配置文件并重启服务，即可集成新子应用。
4. 路由管理清晰：通过 nginx 配置实现子应用的路由管理，确保各子应用页面能正确访问。

安装使用步骤

前提条件

• 已安装 Docker。
• 确保本地 80 端口未被占用。

操作步骤

1. 修改本地 host 文件： bash vi /etc/hosts 127.0.0.1 live.cc
2. 拉取项目源码。
3. 启动项目：进入项目目录，确保 Docker 已启动，执行以下命令启动项目： bash docker-compose up -d
4. 访问项目：在浏览器中访问 http://live.cc 查看主应用页面。点击「去 Demo1 的 About 页面」或者直接访问 http://live.cc/sub1/about 查看子应用页面。
5. 新增项目：
   • 添加 nginx 配置文件 conf/live.conf，配置新子应用站点信息。
   • 将新子项目打包后的文件放到 html 目录下对应的子应用目录中。
   • 重启 nginx 对应的 docker 服务： bash docker-compose restart

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】