前端子项目打包集成主项目实战指南-CSDN博客

本文链接：https://blog.csdn.net/weixin_55977434/article/details/148007028

引言

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

解决方案概述

子项目：纯前端完整项目
主项目：前后端完整项目
集成方式：子项目构建输出到主项目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文件夹里部署后依然存在。