如何在Angular 13中集成含多组件的Vue 3导航栏？

核心结论 #

完全可行，不用纠结Vue3 Web Component的未完善支持，以下两种方案适配你的复杂导航栏（含百余个组件及第三方依赖）：

方案一：UMD打包后直接挂载到Angular #

适合需要双向数据交互、希望样式和DOM更融合的场景：

1. 打包Vue导航栏为UMD格式
   修改Vue项目的vue.config.js，配置UMD输出：

   module.exports = {
     configureWebpack: {
       output: {
         library: 'VueNavBar',
         libraryTarget: 'umd',
         globalObject: 'this'
       }
     }
   }
   

   执行npm run build，得到dist目录下的js/app.[hash].js和css/app.[hash].css。

2. Angular项目引入资源
   在angular.json的projects.architect.build.options中，将打包后的资源路径添加到scripts和styles数组：

   "scripts": [
     "path/to/vue-nav/dist/js/app.[hash].js"
   ],
   "styles": [
     "path/to/vue-nav/dist/css/app.[hash].css"
   ]
   

3. Angular组件中挂载导航栏
   在组件模板中添加挂载容器：

   <div id="vue-navbar-container"></div>
   

   在组件类的ngAfterViewInit钩子中初始化Vue应用：

   import { AfterViewInit, Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements AfterViewInit {
     ngAfterViewInit(): void {
       // 调用UMD暴露的全局方法创建并挂载应用
       (window as any).VueNavBar.createApp().mount('#vue-navbar-container');
     }
   }
   

   注意：如果需要Angular和Vue导航栏传递数据，可以通过全局对象或自定义事件实现，比如在Vue中监听window的自定义事件，Angular中触发事件传递数据。

方案二：iframe独立嵌入（最省心的复杂依赖场景） #

适合避免框架间依赖冲突、快速集成的场景：

1. 部署Vue导航栏为独立静态应用
   将Vue导航栏打包后部署到任意静态服务器（比如Nginx、Netlify），得到可访问的URL（如https://your-nav-domain.com）。

2. Angular中嵌入iframe
   在组件模板中添加iframe标签：

   <iframe 
     src="https://your-nav-domain.com"
     frameborder="0"
     style="width: 100%; height: 60px; border: none;"
     title="全局导航栏"
   ></iframe>
   

3. 跨域数据通信（可选）
   如果需要Angular和导航栏交互，使用postMessage：

   • Angular中发送数据：

     sendToNav() {
       const iframe = document.querySelector('iframe') as HTMLIFrameElement;
       iframe.contentWindow?.postMessage({
         type: 'UPDATE_USER',
         data: { name: 'Sriram' }
       }, 'https://your-nav-domain.com');
     }
     

   • Vue导航栏中监听消息：

     window.addEventListener('message', (event) => {
       if (event.origin !== 'https://your-angular-domain.com') return;
       if (event.data.type === 'UPDATE_USER') {
         // 处理用户数据更新
         console.log(event.data.data);
       }
     });
     

关于你遇到的报错 #

ERROR Vue 3 support of the web component target is still under development. 是因为Vue3官方的Web Component编译目标尚未稳定，不适合用于包含大量第三方依赖的复杂组件，直接放弃这个方案即可。

内容的提问来源于stack exchange，提问作者Sriram Prasanth