Vue项目中通过iframe嵌入另一个项目是否合理？是否需改用slot实现？

现有实现的合规性判断 #

你当前的实现方案是完全符合该场景下的开发规范的，本身没有逻辑问题，是跨独立前端项目嵌入页面的最常用实现方式。

关于slot是否适用的说明 #

slot完全不适用该需求，原因如下：

• slot是Vue提供的同一项目内组件的内容分发能力，仅能处理同一个Vue应用内部的组件内容插槽填充
• 你的两个项目是独立部署、运行在不同端口的独立应用，代码层面没有依赖关系，slot根本无法跨项目获取另一个应用的页面内容

可优化点参考 #

你可以对现有方案做几个小调整，让实现更严谨：

• 补全iframe源地址的协议头，当前配置的localhost:8081会被浏览器识别为当前主站的相对路径，需要改为http://localhost:8081，生产环境替换为对应完整域名即可
• 给iframe增加sandbox属性，按需配置嵌套页面的权限（比如allow-scripts允许运行脚本、allow-same-origin允许同域请求等），提升主站安全性
• 可以补充iframe加载状态监听，加载过程中展示loading占位，避免长时间空白影响用户体验
• 高度可以调整为height: calc(100vh - 顶部导航高度)之类的固定值，避免当前99%高度可能出现的底部留白或滚动条问题

内容的提问来源于stack exchange，提问作者Олег З