Nginx 同一端口下部署多个 Vue3 项目

本文介绍了如何将包含主项目和子项目的前端应用部署到Nginx同一监听端口,涉及vite.config.js中的base路径设置,以及Nginx.conf的配置技巧,特别强调了子项目配置的注意事项,如MIME类型问题和try_files的正确设置。

前言

前端多项目部署到 Nginx 的同一监听端口下的解决方案,项目由一个主项目和多个子项目组成,主项目和子项目都是单独打包。

主子项目之间是使用的腾讯开源的无界(WebComponent 容器 + iframe 沙箱)前端框架,能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。

https://wujie-micro.github.io/doc

项目打包设置

vite.config.js文件中设置 base 路径:

主项目 base 路径设置为默认即可'/':

export default defineConfig(({
    
     command, mode }) => {
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值