前端子项目打包集成主项目实战指南

引言

在实际项目开发中，需要将一个独立的前端子项目集成到主项目中。由于部署限制，意味着这两个项目必须要部署在同一个服务器上，不符合我接收到的要求，以下为本人解决的具体步骤和原理：

解决方案概述

• 子项目：纯前端完整项目
• 主项目：前后端完整项目
• 集成方式：子项目构建输出到主项目public目录，主项目通过iframe引用

实施步骤

1. 子项目配置修改打包目录路径

// vite.config.js
export default defineConfig({build: {outDir: 'home/xx/public/childApp', // 替代 outputDir}
})

‌注意事项‌：

• 确保打包位置是主项目的public文件夹
• 其他位置会导致部署后资源不可用

2. 主项目引用

//主项目中任意层级文件中引用，直接以 / 开头引用 public 下的资源<iframe src='/childApp/index.html'/> 

原理说明

为什么使用public目录？

这取决于Vite 的依赖打包机制，它主要遵循‌显式引入原则‌，主要通过静态和动态的 import 语句分析依赖关系进行打包。子包没有被引入，又放在非public文件夹下，则主项目打包部署时不会被打包。就会出现本地可以iframe正常引用，打包部署后查找不到该文件则出现问题。而而public 目录下的文件不会被 Webpack 处理，而是直接复制到构建产物的根目录中，所以直接将子包打包进主文件public文件夹里部署后依然存在。

为什么使用绝对路径？

相对路径(如../public/childApp/index.html)在构建后可能因目录结构变化而失效。绝对路径(/childApp/index.html)能稳定定位public目录下的资源。

方案优势

1. 满足部署限制要求
2. 保持子项目独立性
3. 部署后资源稳定可用

验证方法

部署后检查：

1. 构建产物中是否包含子项目文件
2. iframe是否能正常加载子项目内容